/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=//resources/cr_elements/cr_hidden_style_lit.css.js
 * #import=//resources/cr_elements/cr_spinner_style_lit.css.js
 * #scheme=relative
 * #include=cr-hidden-style-lit cr-spinner-style-lit
 * #css_wrapper_metadata_end */

:host {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr auto auto auto;
  grid-auto-flow: column;
  grid-column-gap: 12px;
  grid-row-gap: 0;
  padding: 8px 16px;
  margin-bottom: 12px;
  background-color: var(--cr-card-background-color);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  border-radius: 4px;
  height: 52px;
  align-items: center;
  min-width: 0;
  position: relative;
}

:host > div {
  overflow: hidden;
  min-width: 0;
}

/* remove default button styling */
.clickable-field {
  text-align: start;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  outline: inherit;
  color: var(--cr-primary-text-color);
}

.clickable-field.copiable {
  cursor: copy;
}

.upload-state-card {
  width: 250px;
  white-space: nowrap;
  font-weight: bold;
  border-radius: 1000px;
  font-size: 14px;
  display: flex;
  height: 34px;
  align-items: center;
  padding: 0 16px;
  color: var(--cr-primary-text-color);
}

.state-default {
  border: none;
  background-color: lightblue;
}

.state-success {
  background-color: rgb(173, 255, 173);
}

.state-pending {
  background-color: orange;
}

@media (prefers-color-scheme: dark) {
  .action-button {
    border: 1px solid DarkGray;
    color: DarkGray;
    background-color: transparent;
  }

  .action-button:not([disabled]):hover {
    --cr-icon-button-fill-color: var(--cr-card-background-color);
    background-color: DarkGray;
  }
}

@media (prefers-color-scheme: light) {
  .action-button {
    border-color: transparent;
    color: DarkGray;
    background-color: rgb(239, 239, 239);
  }

  .action-button:not([disabled]):hover {
    --cr-icon-button-fill-color: black;
  }
}

.actions-container {
  width: 150px;
  justify-content: end;
  display: flex;
}

.action-button {
  height: 40px;
  width: 40px;
  border-radius: 100%;
  margin-inline-start: 0px;
  margin-inline-end: 8px;
}

.action-button.download {
  pointer-events: visible;
}

.info {
  font-size: 13px;
  color: var(--cr-secondary-text-color);
}

.value {
  color: var(--cr-primary-text-color)
}

.spinner {
  --cr-spinner-size: 20px;
}