@use 'sass:math';

// newtab only variables, otherwise use https://firefoxux.github.io/firefox-desktop-components/?path=/story/docs-tokens-table--default

:root {
  --newtab-card-height: 282px;
  --newtab-card-width-medium: 300px;
  --newtab-card-grid-layout-width: 296px; // Matches widget used in Base.jsx
  --newtab-card-height-small: 133px; // Card height for small-sized widgets in the widgets pane
}

$primary-blue: var(--color-accent-primary);
$primary-blue-dark: var(--color-accent-primary);
$primary-text-color-dark: rgb(43, 42, 51);

// -------------------------------------------------------------------------- //
// Grays from http://design.firefox.com/photon/visuals/color.html

$grey-30: #D7D7DB;
$grey-60: #4A4A4F;
$grey-90: #0C0C0D;

$grey-90-10: rgba($grey-90, 0.1);
$grey-90-20: rgba($grey-90, 0.2);

$blue-40-40: oklch(from var(--color-blue-40) / lch 40%);
$blue-50-30: oklch(from var(--color-blue-50) / lch 30%);

$black: #000;
$black-10: rgba($black, 0.1);
$black-15: rgba($black, 0.15);
$black-20: rgba($black, 0.2);
$black-25: rgba($black, 0.25);
$black-30: rgba($black, 0.3);
$black-40: rgba($black, 0.4);

// -------------------------------------------------------------------------- //
// Other colors

$white: var(--color-white);
$status-green: var(--color-green-50);
$status-dark-green: var(--color-green-30);
$bookmark-icon-fill: var(--color-blue-40);
$download-icon-fill: var(--color-green-40);
$pocket-icon-fill: #EF4056;
$email-input-invalid: var(--color-red-10);

$newtab-wordmark-default-color: #20123A;
$newtab-wordmark-darktheme-color: rgb(251, 251, 254);

$in-content-page-color: var(--text-color);
$in-content-page-color-dark: var(--text-color);

// -------------------------------------------------------------------------- //
// These colors should match the colors in the default themes
// (toolkit/mozapps/extensions/...). Note that they could get replaced by other
// themes. The color set in --tabpanel-background-color (tabs.inc.css) should
// match these colors here to avoid flashing.

$in-content-page-background: #F9F9FB;
$in-content-page-background-dark: #2B2A33;
$newtab-background-secondary: var(--color-white);
$newtab-background-secondary-dark: rgb(66, 65, 77);

// Mirrors $newtab-background-secondary with 15% transparency
$newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent);
$newtab-background-card-dark: rgba(66, 65, 77, 85%);

// Photon transitions from http://design.firefox.com/photon/motion/duration-and-easing.html
$photon-easing: cubic-bezier(0.07, 0.95, 0, 1);

// Grid related styles
$base-gutter: 32px;
$section-horizontal-padding: 25px;
$vars-section-horizontal-padding: 25px;
$section-vertical-padding: 10px;
$section-spacing: 40px - $section-vertical-padding * 2; // 20px
$grid-unit: 96px; // 1 top site
// New Tab Experience grid unit needs to be smaller, but for now we are changing
// this UI with a pref, so requires duplication.
$grid-unit-small: 80px; // 1 top site

$icon-size: 16px;
$smaller-icon-size: 12px;
$larger-icon-size: 32px;

$searchbar-width-small: ($grid-unit * 2 + $base-gutter * 1) - 24px; // 200px
$searchbar-width-medium: ($grid-unit * 4 + $base-gutter * 3) - 120px; // 360px
$searchbar-width-large: ($grid-unit * 6 + $base-gutter * 5) - 136px; // 600px
$searchbar-width-largest: ($grid-unit * 6 + $base-gutter * 5) - 16px; // 720px

$wrapper-default-width: $grid-unit * 2 + $base-gutter * 1 + $vars-section-horizontal-padding * 2; // 2 top sites
$wrapper-max-width-medium: $grid-unit * 4 + $base-gutter * 3 + $vars-section-horizontal-padding * 2; // 4 top sites
$wrapper-max-width-large: $grid-unit * 6 + $base-gutter * 5 + $vars-section-horizontal-padding * 2; // 6 top sites
$wrapper-max-width-widest: $grid-unit * 8 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // 8 top sites
$wrapper-max-width-weather: $grid-unit * 12 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // Weather visible
$wrapper-max-width-ultra-wide: $grid-unit * 14 + $base-gutter * 7 + $vars-section-horizontal-padding * 2; // 8 top sites 4 stories
// For the breakpoints, we need to add space for the scrollbar to avoid weird
// layout issues when the scrollbar is visible. 16px is wide enough to cover all
// OSes and keeps it simpler than a per-OS value.
$scrollbar-width: 16px;

// Breakpoints
// If updating these breakpoints, don't forget to update uses of DSImage, which
// might choose the right image src to use depending on the viewport size
// and the $debug-breakpoints list below
$break-point-small: 510px;
$break-point-medium: $wrapper-max-width-medium + $base-gutter * 2 + $scrollbar-width; // 610px
// A temporary breakpoint for a new layout experiment.
$break-point-layout-variant: 724px;
$break-point-large: $wrapper-max-width-large + $base-gutter * 2 + $scrollbar-width; // 866px
$break-point-widest: $wrapper-max-width-widest + $base-gutter * 2 + $scrollbar-width; // 1122px
// temporary breakpoint for sections experiment
$break-point-sections-variant: 1310px + $base-gutter * 2 + $scrollbar-width; // 1374px
$break-point-weather: $wrapper-max-width-weather + $base-gutter * 2 + $scrollbar-width; // 1506px
$break-point-ultra-wide: $wrapper-max-width-ultra-wide + $base-gutter * 2 + $scrollbar-width; // 1698px

// Used for @include debug-breakpoints in mixins.scss
$debug-breakpoints: (
  small: $break-point-small,
  medium: $break-point-medium,
  large: $break-point-large,
  widest: $break-point-widest,
  sections-variant: $break-point-sections-variant,
  weather: $break-point-weather,
  ultra-wide: $break-point-ultra-wide
);

$debug-breakpoint-colors: (
  small: red,
  medium: orange,
  large: yellow,
  widest: green,
  sections-variant: blue,
  weather: purple,
  ultra-wide: violet
);

$section-title-font-size: var(--font-size-large);

$card-width: $grid-unit-small * 2 + $base-gutter;

$card-height: 266px;
$card-preview-image-height: 122px;
$card-title-margin: 2px;
$card-text-line-height: 19px;

// Larger cards for wider screens:
$card-width-large: 309px;
$card-height-large: 370px;
$card-preview-image-height-large: 155px;

// Compact cards for Highlights
$card-height-compact: 160px;
$card-preview-image-height-compact: 108px;

$topic-margin-block-start: 12px;

$context-menu-button-size: 27px;
$context-menu-button-boxshadow: 0 2px $grey-90-10;
$context-menu-shadow: 0 5px 10px $black-30, 0 0 0 1px $black-20;
$context-menu-font-size: inherit;

// $context-menu-border-radius: 5px;
$context-menu-outer-padding: 5px;
$context-menu-item-padding: 3px 12px;

$image-path: 'chrome://newtab/content/data/content/assets/';

$textbox-shadow-size: 4px;

$customize-menu-slide-bezier: cubic-bezier(0.46, 0.03, 0.52, 0.96);
$customize-menu-expand-bezier: cubic-bezier(0.82, 0.085, 0.395, 0.895);
$customize-menu-border-tint: 1px solid rgba(0, 0, 0, 15%);

@mixin fade-in {
  box-shadow: inset $inner-box-shadow, $shadow-primary;
  transition: box-shadow 150ms;
}

@mixin fade-in-card {
  box-shadow: $shadow-primary;
  transition: box-shadow 150ms;
}

@mixin ds-focus {
  border: 0;
  outline: var(--focus-outline);
}

@mixin context-menu-button {
  .context-menu-button {
    background-clip: padding-box;
    background-color: var(--newtab-button-background);
    background-image: url('chrome://global/skin/icons/more.svg');
    background-position: 50.1%;
    border: 0;
    outline: 1px solid var(--border-color);
    outline-width: 0;
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    color: var(--button-text-color);
    fill: var(--newtab-button-text);
    height: $context-menu-button-size;
    inset-inline-end: calc(var(--space-medium) * -1);
    opacity: 0;
    position: absolute;
    inset-block-start: calc(var(--space-medium) * -1);
    transform: scale(0.25);
    transition-duration: 150ms;
    transition-property: transform, opacity;
    width: $context-menu-button-size;

    &:is(:active, :focus-visible, :hover) {
      opacity: 1;
      transform: scale(1);
    }

    &:is(:hover) {
      background-color: var(--newtab-button-hover-background);
    }

    &:is(:focus-visible) {
      outline-color: var(--newtab-button-focus-border);
      background-color: var(--newtab-button-focus-background);
      outline-width: 4px;
    }

    &:is(:active) {
      background-color: var(--newtab-button-active-background);
    }


  }
}

@mixin context-menu-button-hover {
  .context-menu-button {
    opacity: 1;
    transform: scale(1);
    transition-delay: 333ms;
  }
}

@mixin context-menu-open-middle {
  .context-menu {
    margin-inline-end: auto;
    margin-inline-start: auto;
    inset-inline-end: auto;
    inset-inline-start: calc(var(--space-xxlarge) * -1);
  }
}

@mixin context-menu-open-left {
  .context-menu {
    margin-inline-end: var(--space-xsmall);
    margin-inline-start: auto;
    inset-inline-end: 0;
    inset-inline-start: auto;
  }
}

@mixin flip-icon {
  &:dir(rtl) {
    transform: scaleX(-1);
  }
}