@use "design";
@use "m";

// Variables that should only be defined once in the entire output
// -------------------------------------

@include design.baseColors;
@include design.baseSpacing;

@include m.handheld {
  @include design.baseHandheldSpacing;
}

@include m.desktop {
  @include design.baseDesktopSpacing;
}

// General setup
// -------------------------------------

body {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  @include design.font-body;

  -webkit-tap-highlight-color: transparent;

  // padding-top: design.$content-inset-top;
  padding-bottom: design.$content-inset-bottom;

  // Force a scroll gutter to avoid layout
  // shift when scrollbar appears and disappears
  overflow-y: scroll;

  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;

  // Don't combine these selectors, it doesn't work!

  ::selection {
    background: design.$color-selection;
  }

  ::-moz-selection {
    background: design.$color-selection;
  }

  &.hideOverflow {
    overflow: hidden;
  }

  @include m.handheld {
    background-color: design.$color-page-background;
    color: design.$color-on-page-background;

    &.hideOverflowHandheld {
      overflow: hidden;
    }
  }

  @include m.desktop {
    // background-color: design.$color-surface;
    // color: design.$color-on-surface;

    &.hideOverflowDesktop {
      overflow: hidden;
    }
  }
}

// These are too useful to give up:
i,
em {
  font-style: italic;
}
b,
strong {
  font-weight: design.$weight-display-bold;
}

// General focus rings all over the place
:focus-visible {
  @include m.focusRing;
}

// Fix various overlays to work with app insets LOL
// -------------------------------------

@include m.handheld {
  // Zendesk
  .zendesk-open iframe[title^="Messaging window"] {
    top: design.$app-inset-top !important;
    bottom: design.$app-inset-bottom !important;
    height: calc(100% - design.$app-inset-top - design.$app-inset-bottom) !important;
  }

  // Plaid
  iframe[id^="plaid-link-iframe"] {
    inset-block-start: design.$app-inset-top !important;
    inset-block-end: design.$app-inset-bottom !important;
    height: calc(100% - design.$app-inset-top - design.$app-inset-bottom) !important;
  }

  // Argyle
  div[id^="argyle-link-root-"] {
    div[class^="LinkStyles__Wrapper"] {
      inset-block-start: design.$app-inset-top !important;
      inset-block-end: design.$app-inset-bottom !important;
    }
  }
}

// Theme colors
// -------------------------------------

.peachTheme {
  --color-primary: #{design.$perk-color-loans};
  --color-secondary: #{design.$perk-color-loans};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $text: design.$peach-05,
    $bg: design.$peach-70,
    // $hover: design.$peach60,
    $active: design.$peach-60,
    $ghost-text: design.$peach-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$peach-95
  );
}

.peachInvertedTheme {
  --color-primary: #{design.$perk-color-loans};
  --color-secondary: #{design.$peach-98};

  --color-surface: #{design.$peach-60};
  --color-surface-variant: #{design.$peach-70};
  --color-on-surface: #{design.$peach-99};
  --color-surface-variant: #{design.$peach-70};
  --color-on-surface-variant: #{design.$peach-95};
  --color-neutral-shadow: #6e527091;
  --text-grey: #{design.$peach-95};
  --card-border-color: #{design.$peach-70};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $text: design.$peach-05,
    $bg: design.$peach-90,
    // $hover: design.$peach60,
    $active: design.$peach-95,
    $ghost-text: design.$peach-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$peach-95
  );
}

.yellowTheme {
  --color-primary: #{design.$yellow-40};
  --color-secondary: #{design.$yellow-40};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$yellow-10,
    $bg: design.$yellow-80,
    // $hover: design.$peach60,
    $active: design.$yellow-70,
    $ghost-text: design.$yellow-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$yellow-95
  );
}

.yellowInvertedTheme {
  --color-primary: #{design.$yellow-20};

  --color-surface: #{design.$yellow-75};
  --color-on-surface: #{design.$yellow-15};
  --color-neutral-shadow: #5e58437c;
  --color-on-surface-variant: #{design.$yellow-40};
  --text-grey: #{design.$yellow-40};
  --card-border-color: #{design.$yellow-60};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$yellow-10,
    $bg: design.$yellow-95,
    // $hover: design.$peach60,
    $active: design.$yellow-98,
    $ghost-text: design.$yellow-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$yellow-95
  );
}

.greenTheme {
  --color-primary: #{design.$green-40};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$green-100,
    $bg: design.$green-50,
    $active: design.$green-40,
    $ghost-text: design.$green-40,
    $ghost-active: design.$green-95
  );
}

.tealTheme {
  --color-primary: #{design.$teal-40};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$teal-10,
    $bg: design.$teal-90,
    $active: design.$teal-80,
    $ghost-text: design.$teal-40,
    $ghost-active: design.$teal-95
  );
}

.pinkTheme {
  --color-primary: #{design.$pink-50};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$pink-99,
    $bg: design.$pink-50,
    $active: design.$pink-40,
    $ghost-text: design.$pink-40,
    $ghost-active: design.$pink-95
  );
}

.pinkInvertedTheme {
  --color-surface: #{design.$pink-50};
  --color-on-surface: #{design.$pink-99};
  --color-surface-variant: #{design.$pink-60};
  --color-neutral-shadow: #6e527091;
  --color-on-surface-variant: #{design.$pink-90};
  --text-grey: #{design.$pink-90};
  --card-border-color: #{design.$pink-60};
  --color-success: #{design.$pink-95};
  --color-secondary: #{design.$pink-90};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$pink-10,
    $bg: design.$pink-90,
    $active: design.$pink-95,
    $ghost-text: design.$pink-98,
    $ghost-active: design.$pink-40
  );
}

.purpleInvertedTheme {
  --color-surface: #{design.$purple-35};
  --color-on-surface: #{design.$purple-99};
  --color-surface-variant: #{design.$purple-60};
  --color-neutral-shadow: #6e527091;
  --color-on-surface-variant: #{design.$purple-90};
  --text-grey: #{design.$purple-90};
  --card-border-color: #{design.$purple-60};
  --color-success: #{design.$purple-95};
  --color-secondary: #{design.$purple-90};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$purple-10,
    $bg: design.$purple-90,
    $active: design.$purple-95,
    $ghost-text: design.$purple-98,
    $ghost-active: design.$purple-40
  );
}

.ochreTheme {
  --color-primary: #{design.$perk-color-stream};
  --color-secondary: #{design.$perk-color-stream};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $text: design.$ochre-98,
    $bg: design.$ochre-50,
    $active: design.$ochre-60,
    $ghost-text: design.$ochre-40,
    $ghost-active: design.$ochre-95
  );
}

.ochreInvertedTheme {
  --color-surface: #{design.$ochre-50};
  --color-on-surface: #{design.$ochre-99};
  --color-surface-variant: #{design.$ochre-60};
  --color-neutral-shadow: #6e527091;
  --color-on-surface-variant: #{design.$ochre-90};
  --text-grey: #{design.$ochre-90};
  --card-border-color: #{design.$ochre-60};
  --color-success: #{design.$ochre-95};
  --color-secondary: #{design.$ochre-90};

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: design.$ochre-10,
    $bg: design.$ochre-90,
    $active: design.$ochre-95,
    $ghost-text: design.$ochre-98,
    $ghost-active: design.$ochre-40
  );
}

// TODO: turn these into color references
.tanTheme {
  --color-surface: #fbf6ed;
  --color-on-surface: #181816;
  --color-surface-active: #ede2cc;

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: false,
    $text: #fff,
    $bg: #a36600,
    $active: #8d5b05,
    $ghost-text: #4a3510,
    $ghost-active: #cfc7b9
  );
}

// Default button color definitions
// -------------------------------------

body {
  @include m.defineButtonColor(
    $name: design.buttonColorName("base"),
    $initialize: true,
    $text: design.$neutral-10,
    $bg: design.$neutral-90,
    $active: design.$neutral-70,
    $ghost-text: design.$neutral-10,
    $ghost-active: design.$neutral-90
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentPrimary"),
    $initialize: true,
    $text: design.$color-on-primary,
    $bg: design.$color-primary,
    $active: design.$purple-30,
    $ghost-text: design.$purple-40,
    $ghost-active: design.$purple-90
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("accentSecondary"),
    $initialize: true,
    $text: design.$green-100,
    $bg: design.$green-50,
    $active: design.$green-40,
    $ghost-text: design.$green-40,
    $ghost-active: design.$green-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("brandPrimary"),
    $initialize: true,
    $text: design.$color-on-primary,
    $bg: design.$color-primary,
    $active: design.$purple-30,
    $ghost-text: design.$purple-40,
    $ghost-active: design.$purple-90
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("brandSecondary"),
    $initialize: true,
    $text: design.$green-100,
    $bg: design.$green-50,
    $active: design.$green-40,
    $ghost-text: design.$green-40,
    $ghost-active: design.$green-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("red"),
    $initialize: true,
    $text: design.$red-99,
    $bg: design.$red-40,
    $active: design.$red-35,
    $ghost-text: design.$red-40,
    $ghost-active: design.$red-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("peach"),
    $initialize: true,
    $text: design.$peach-05,
    $bg: design.$peach-70,
    // $hover: design.$peach60,
    $active: design.$peach-60,
    $ghost-text: design.$peach-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$peach-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("yellow"),
    $initialize: true,
    $text: design.$yellow-10,
    $bg: design.$yellow-80,
    // $hover: design.$peach60,
    $active: design.$yellow-70,
    $ghost-text: design.$yellow-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$yellow-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("lime"),
    $initialize: true,
    $text: design.$green-05,
    $bg: design.$green-80,
    // $hover: design.$peach60,
    $active: design.$green-70,
    $ghost-text: design.$green-40,
    // $ghost-hover: design.$peach95,
    $ghost-active: design.$green-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("teal"),
    $initialize: true,
    $text: design.$teal-10,
    $bg: design.$teal-90,
    $active: design.$teal-80,
    $ghost-text: design.$teal-40,
    $ghost-active: design.$teal-95
  );

  @include m.defineButtonColor(
    $name: design.buttonColorName("pink"),
    $initialize: true,
    $text: design.$pink-99,
    $bg: design.$pink-50,
    $active: design.$pink-40,
    $ghost-text: design.$pink-40,
    $ghost-active: design.$pink-95
  );
}