/* Copyright 2025 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=chrome://resources/cr_elements/cr_hidden_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=./shared_style.css.js
 * #include=cr-hidden-style-lit shared-style
 * #css_wrapper_metadata_end */

:host {
  display: block;
  outline: none;
  pointer-events: none;

  --item-container-padding-start: 14px;
  --title-domain-padding-start: 5px;
  --favicon-size: 24px;
  --actor-icon-size: 16px;
  --actor-icon-floating-offset: 6px;
  --website-title-margin-start: 8px;
  --critical-action-row-padding-start: 20px;
}

:host([is-critical-actions-enabled_]) {
  --website-title-margin-start: 24px;
}

#main-container {
  position: relative;
}

:host([is-card-end]) #main-container {
  margin-bottom: var(--card-padding-between);
}

:host([is-card-start][is-card-end]) #main-container {
  border-radius: var(--cr-card-border-radius);
}

#date-accessed {
  display: none;
}

:host([is-card-start]) #date-accessed {
  display: block;
}

#item-container {
  align-items: flex-start;
  display: flex;
  min-height: var(--item-height);
  padding-inline-start: var(--item-container-padding-start);
  pointer-events: auto;
}

:host([is-card-start]) #item-container {
  padding-top: var(--card-first-last-item-padding);
}

:host([is-card-end]) #item-container {
  padding-bottom: var(--card-first-last-item-padding);
}

#checkbox-cell {
  align-items: center;
  display: flex;
  height: var(--item-height);
}

#item-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

#item-info-row {
  align-items: center;
  display: flex;
  height: var(--item-height);
  min-width: 0;
  width: 100%;
}

#title-and-domain {
  align-items: center;
  display: flex;
  flex: 1;
  height: var(--item-height);
  margin-inline-end: auto;
  overflow: hidden;
  /* Allows the link's focus outline to be shown completely. */
  padding-inline-start: var(--title-domain-padding-start);
}

#checkbox {
  margin: 0 10px;
}

.website-icon {
  height: var(--favicon-size);
  width: var(--favicon-size);
}

.website-title {
  margin-inline-start: var(--website-title-margin-start);
}

/* Styling the element before cr-checkbox is defined is necessary since
    cr-checkbox is being lazy-loaded. */
#checkbox:not(:defined) {
  border: 2px solid var(--cr-secondary-text-color);
  border-radius: 2px;
  content: '';
  display: block;
  height: 12px;
  width: 12px;
}

#timeAccessed {
  align-items: center;
  color: var(--history-item-time-color);
  display: flex;
  font-size: 12px;
  height: var(--item-height);
  margin-inline-start: 6px;
  min-width: 96px;
}

#domain {
  color: var(--cr-secondary-text-color);
  font-size: 12px;
  margin-inline-start: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menuButton {
  --cr-icon-button-margin-end: 20px;
  --cr-icon-button-margin-start: 0;
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-size: 24px;
}

#actor-icon {
  --cr-icon-size: 20px;
  --paper-tooltip-min-width: 0;
  padding-inline-start: 12px;
}

.website-link {
  position: relative;
}

#title-and-domain #actor-icon {
  --cr-icon-size: 12px;
  --cr-tooltip-icon-fill-color: var(--color-sys-on-tonal-container,
      var(--cr-fallback-color-on-tonal-container));
  align-items: center;
  background-color: var(--color-sys-surface1,
      var(--cr-fallback-color-surface1));
  border-radius: 50%;
  display: flex;
  flex: none;
  height: var(--actor-icon-size);
  width: var(--actor-icon-size);
  inset-inline-start: calc(
      var(--favicon-size) - var(--actor-icon-size) +
      var(--actor-icon-floating-offset));
  justify-content: center;
  padding-inline-start: 0;
  position: absolute;
  z-index: 1;
}

#bookmark-star {
  --cr-icon-button-fill-color: var(--interactive-color);
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-margin-start: 12px;
  --cr-icon-button-size: 32px;
}

#expand-button {
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-margin-start: 12px;
  --cr-icon-button-size: 32px;
}

#collapse {
  pointer-events: auto;
}

#expanded-container {
  border: 0;
  padding: 6px 0;
}

.critical-actions-title {
  color: var(--cr-primary-text-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-inline-start: calc(
    var(--title-domain-padding-start) +
    var(--favicon-size) +
    var(--website-title-margin-start)
  );
  padding-bottom: 4px;
}

.critical-actions-list {
  display: flex;
  flex-direction: column;
  padding-inline-start: calc(
    var(--title-domain-padding-start) +
    var(--favicon-size) +
    var(--website-title-margin-start) -
    var(--critical-action-row-padding-start)
  );
}

.critical-action-row {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  height: 32px;
  justify-content: space-between;
  outline: none;
  padding-inline-start: var(--critical-action-row-padding-start);
  padding-inline-end: 16px;
  transition: background-color 150ms ease-in-out;
  user-select: none;
}

.critical-action-row:hover {
  background-color: var(
      --color-sys-state-hover-on-subtle,
      var(--cr-hover-background-color));
}

.critical-action-row:active {
  background-color: var(
      --color-sys-state-pressed,
      var(--cr-active-background-color));
}

.critical-action-row:focus-visible {
  outline: 2px solid var(--cr-focus-outline-color);
}

.critical-action-label {
  color: var(--cr-primary-text-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.critical-action-button {
  --cr-icon-button-fill-color: var(--cr-secondary-text-color);
  --cr-icon-button-hover-background-color: transparent;
  --cr-icon-button-active-background-color: transparent;
  --cr-icon-button-icon-size: 18px;
  --cr-icon-button-size: 20px;
}

.critical-action-row:hover .critical-action-button {
  --cr-icon-button-fill-color: var(--cr-primary-text-color);
}

#icons {
  align-items: center;
  display: flex;
  padding-inline-end: 12px;
}

#debug-container {
  color: var(--history-item-time-color);
  display: flex;
  padding-inline-start: 22px;
  pointer-events: auto;
}

.debug-info:not(:first-child) {
  margin-inline-start: 15px;
}

#time-gap-separator {
  border-inline-start: 1px solid #888;
  height: 15px;
  margin-inline-start: 77px;
}

@media (prefers-color-scheme: dark) {
  #time-gap-separator {
    border-color: var(--google-grey-500);
  }
}

#background-clip {
  /* Prevent artifacts when zoomed by overlapping the next item. */
  bottom: -0.4px;
  clip: rect(auto 999px auto -5px); /* Clip the top and bottom edges. */
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

:host([is-card-end]) #background-clip {
  bottom: 0;
  clip: rect(auto 999px 500px -5px); /* Clip the top edge. */
}

:host([is-card-start]) #background-clip {
  clip: auto;
}

#background {
  background-color: var(--cr-card-background-color);
  bottom: 0;
  box-shadow: var(--cr-card-shadow);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

:host(:not([is-card-start])) #background {
  top: -5px; /* Draw the box shadow up the full edge of the background. */
}

:host([is-card-start]) #background {
  border-radius: var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0;
}

:host([is-card-end]) #background {
  border-radius: 0 0 var(--cr-card-border-radius) var(--cr-card-border-radius);
}

:host([is-card-start][is-card-end]) #background {
  border-radius: var(--cr-card-border-radius);
}

#options {
  align-items: center;
  display: flex;
  height: var(--item-height);
}

/* Visually hide the label but still allow the screen reader to
  pick it up. */
cr-checkbox::part(label-container) {
  clip: rect(0,0,0,0);
  display: block;
  position: fixed;
}