/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://global/skin/in-content/common.css");

:root {
  /* override --background-color-canvas from tokens-shared.css */
  background-color: transparent;
  --fxview-background-color: var(--newtab-background-color, var(--background-color-canvas));
  --fxview-background-color-secondary: var(--newtab-background-color-secondary, light-dark(#ffffff, #42414d));
  --fxview-element-background-hover: light-dark(
    color-mix(in srgb, var(--fxview-background-color) 90%, currentColor),
    color-mix(in srgb, var(--fxview-background-color) 80%, white)
  );
  --fxview-element-background-active: light-dark(
    color-mix(in srgb, var(--fxview-background-color) 80%, currentColor),
    color-mix(in srgb, var(--fxview-background-color) 60%, white)
  );
  --fxview-text-primary-color: var(--newtab-text-primary-color, var(--text-color));
  --fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent);
  --fxview-text-color-hover: var(--newtab-text-primary-color);
  --fxview-primary-action-background: var(--newtab-primary-action-background, light-dark(#0061e0, #00ddff));
  --fxview-border: var(--border-color-transparent);
  --fxview-indicator-stroke-color-hover: light-dark(#deddde, #5d5c66);

  /* ensure utility button hover states match those of the rest of the page */
  --button-background-color-hover: var(--fxview-element-background-hover);
  --button-background-color-active: var(--fxview-element-background-active);
  --button-text-color-hover: var(--fxview-text-color-hover);

  --fxview-sidebar-width: 288px;
  --fxview-margin-top: 72px;
  --fxview-card-padding-inline: 4px;

  /* copy over newtab background color from activity-stream-[os].css files */
  --newtab-background-color: light-dark(#f9f9fb, #2b2a33);
  --fxview-card-header-font-weight: var(--heading-font-weight);

  &[lwt-newtab] {
    color-scheme: light;
  }
  &[lwt-newtab-brighttext] {
    color-scheme: dark;
  }
}

@media (forced-colors) {
  :root {
    --fxview-element-background-hover: ButtonText;
    --fxview-element-background-active: ButtonText;
    --fxview-text-color-hover: ButtonFace;
    --newtab-primary-action-background: LinkText;
    --newtab-background-color: Canvas;
    --newtab-background-color-secondary: Canvas;
  }
}

@media (max-width: 52rem) {
  :root {
    --fxview-sidebar-width: 82px;
  }
}

body {
  display: grid;
  gap: 12px;
  grid-template-columns: var(--fxview-sidebar-width) 1fr;
  background-color: var(--fxview-background-color);
  color: var(--fxview-text-primary-color);

  @media (max-width: 52rem) {
    display: flex;
  }
}

.main-container {
  width: 90%;
  margin: 0 auto;
  min-width: 43rem;
  max-width: 71rem;
}

@media (min-width: 120rem) {
  .main-container {
    margin-inline-start: 148px;
  }
}

.page-header {
  margin: 0;
}

.sticky-container {
  position: sticky;
  top: 0;
  padding-block: var(--fxview-margin-top) 33px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.sticky-container.bottom-fade {
  /*
   * padding-inline is doubled to allow for the negative margin below to offset the
   * container so that the box-shadows on the cards are hidden as they pass underneath.
   */
  padding-inline: calc(var(--fxview-card-padding-inline) * 2);
  margin: 0 calc(var(--fxview-card-padding-inline) * -1);

  background: linear-gradient(to bottom, var(--fxview-background-color) 0%, var(--fxview-background-color) 95%, transparent 100%);
  /* When you use HCM or set custom colors, you can't use a gradient. */
  @media (forced-colors) {
    background: var(--fxview-background-color);
  }
}

.cards-container {
  padding-inline: var(--fxview-card-padding-inline);
}

view-opentabs-contextmenu {
  display: contents;
}

/* This should be supported within panel-{item,list} rather than modifying it */
panel-item::part(button) {
  padding-inline-start: 12px;
  cursor: pointer;
}

panel-item::part(button):hover {
  background-color: var(--fxview-element-background-hover);
  color: var(--fxview-text-color-hover);
}

panel-item::part(button):hover:active {
  background-color: var(--fxview-element-background-active);
}

fxview-empty-state {
  &:not([isSelectedTab]) button[slot="primary-action"] {
    margin-inline-start: 0;
  }

  /* these illustrations need a larger width otherwise they look too small */
  &.synced-tabs::part(image-container) {
    min-width: 250px;
  }

  /* center align the empty state image */
  &.recentlyclosed::part(image-container) {
    margin-inline-start: 50px;
  }

  /* align empty state text with synced tabs on recent browsing page */
  &.recentlyclosed::part(main) {
    padding-inline-start: 50px;
  }
}
