/**
 * Sass Variables, Functions & Mixins
 */
$purple: #1E164B !default;
$purple-900: #06040F !default;
$purple-800: #0C091E !default;
$purple-700: #120D2D !default;
$purple-600: #18123C !default;
$purple-500: #1E164B !default;
$purple-400: #4B456F !default;
$purple-300: #787393 !default;
$purple-200: #A5A2B7 !default;
$purple-100: #D2D0DB !default;

$royal: #303AB2 !default;
$royal-900: #0A0C24 !default;
$royal-800: #131747 !default;
$royal-700: #1D236B !default;
$royal-600: #262E8E !default;
$royal-500: #303AB2 !default;
$royal-400: #5961C1 !default;
$royal-300: #8389D1 !default;
$royal-200: #ACB0E0 !default;
$royal-100: #D6D8F0 !default;

$blue: #0072F0 !default;
$blue-900: #001730 !default;
$blue-800: #002E60 !default;
$blue-700: #004490 !default;
$blue-600: #005BC0 !default;
$blue-500: #0072F0 !default;
$blue-400: #338EF3 !default;
$blue-300: #66AAF6 !default;
$blue-200: #99C7F9 !default;
$blue-100: #CCE3FC !default;

$teal: #01BBC8 !default;
$teal-900: #002528 !default;
$teal-800: #004B50 !default;
$teal-700: #017078 !default;
$teal-600: #0196A0 !default;
$teal-500: #01BBC8 !default;
$teal-400: #34C9D3 !default;
$teal-300: #67D6DE !default;
$teal-200: #99E4E9 !default;
$teal-100: #CCF1F4 !default;

$green: #1DAE61 !default;
$green-900: #062313 !default;
$green-800: #0C4627 !default;
$green-700: #11683A !default;
$green-600: #178B4E !default;
$green-500: #1DAE61 !default;
$green-400: #4ABE81 !default;
$green-300: #77CEA0 !default;
$green-200: #A5DFC0 !default;
$green-100: #D2EFDF !default;

$seafoam: #3CDBC0 !default;
$seafoam-900: #0C2C26 !default;
$seafoam-800: #18584D !default;
$seafoam-700: #248373 !default;
$seafoam-600: #30AF9A !default;
$seafoam-500: #3CDBC0 !default;
$seafoam-400: #63E2CD !default;
$seafoam-300: #8AE9D9 !default;
$seafoam-200: #B1F1E6 !default;
$seafoam-100: #D8F8F2 !default;

$yellow: #FFD400 !default;
$yellow-900: #332A00 !default;
$yellow-800: #665500 !default;
$yellow-700: #997F00 !default;
$yellow-600: #CCAA00 !default;
$yellow-500: #FFD400 !default;
$yellow-400: #FFDD33 !default;
$yellow-300: #FFE566 !default;
$yellow-200: #FFEE99 !default;
$yellow-100: #FFF6CC !default;

$orange: #FF9425 !default;
$orange-900: #331E07 !default;
$orange-800: #663B0F !default;
$orange-700: #995916 !default;
$orange-600: #CC761E !default;
$orange-500: #FF9425 !default;
$orange-400: #FFA951 !default;
$orange-300: #FFBF7C !default;
$orange-200: #FFD4A8 !default;
$orange-100: #FFEAD3 !default;

$red: #E4002B !default;
$red-900: #2E0009 !default;
$red-800: #5B0011 !default;
$red-700: #89001A !default;
$red-600: #B60022 !default;
$red-500: #E4002B !default;
$red-400: #E93355 !default;
$red-300: #EF6680 !default;
$red-200: #F499AA !default;
$red-100: #FACCD5 !default;

$ice: #C5C9D4 !default;
$ice-900: #27282A !default;
$ice-800: #4F5055 !default;
$ice-700: #76797F !default;
$ice-600: #9EA1AA !default;
$ice-500: #C5C9D4 !default;
$ice-400: #D1D4DD !default;
$ice-300: #DCDFE5 !default;
$ice-200: #E8E9EE !default;
$ice-100: #F3F4F6 !default;

$white: #ffffff !default;
$black: #000000 !default;

$colors-map: (
  'purple': $purple,
  'purple-900': $purple-900,
  'purple-800': $purple-800,
  'purple-700': $purple-700,
  'purple-600': $purple-600,
  'purple-500': $purple-500,
  'purple-400': $purple-400,
  'purple-300': $purple-300,
  'purple-200': $purple-200,
  'purple-100': $purple-100,

  'royal': $royal,
  'royal-900': $royal-900,
  'royal-800': $royal-800,
  'royal-700': $royal-700,
  'royal-600': $royal-600,
  'royal-500': $royal-500,
  'royal-400': $royal-400,
  'royal-300': $royal-300,
  'royal-200': $royal-200,
  'royal-100': $royal-100,

  'blue': $blue,
  'blue-900': $blue-900,
  'blue-800': $blue-800,
  'blue-700': $blue-700,
  'blue-600': $blue-600,
  'blue-500': $blue-500,
  'blue-400': $blue-400,
  'blue-300': $blue-300,
  'blue-200': $blue-200,
  'blue-100': $blue-100,

  'teal': $teal,
  'teal-900': $teal-900,
  'teal-800': $teal-800,
  'teal-700': $teal-700,
  'teal-600': $teal-600,
  'teal-500': $teal-500,
  'teal-400': $teal-400,
  'teal-300': $teal-300,
  'teal-200': $teal-200,
  'teal-100': $teal-100,

  'green': $green,
  'green-900': $green-900,
  'green-800': $green-800,
  'green-700': $green-700,
  'green-600': $green-600,
  'green-500': $green-500,
  'green-400': $green-400,
  'green-300': $green-300,
  'green-200': $green-200,
  'green-100': $green-100,

  'seafoam': $seafoam,
  'seafoam-900': $seafoam-900,
  'seafoam-800': $seafoam-800,
  'seafoam-700': $seafoam-700,
  'seafoam-600': $seafoam-600,
  'seafoam-500': $seafoam-500,
  'seafoam-400': $seafoam-400,
  'seafoam-300': $seafoam-300,
  'seafoam-200': $seafoam-200,
  'seafoam-100': $seafoam-100,

  'yellow': $yellow,
  'yellow-900': $yellow-900,
  'yellow-800': $yellow-800,
  'yellow-700': $yellow-700,
  'yellow-600': $yellow-600,
  'yellow-500': $yellow-500,
  'yellow-400': $yellow-400,
  'yellow-300': $yellow-300,
  'yellow-200': $yellow-200,
  'yellow-100': $yellow-100,

  'orange': $orange,
  'orange-900': $orange-900,
  'orange-800': $orange-800,
  'orange-700': $orange-700,
  'orange-600': $orange-600,
  'orange-500': $orange-500,
  'orange-400': $orange-400,
  'orange-300': $orange-300,
  'orange-200': $orange-200,
  'orange-100': $orange-100,

  'red': $red,
  'red-900': $red-900,
  'red-800': $red-800,
  'red-700': $red-700,
  'red-600': $red-600,
  'red-500': $red-500,
  'red-400': $red-400,
  'red-300': $red-300,
  'red-200': $red-200,
  'red-100': $red-100,

  'ice': $ice,
  'ice-900': $ice-900,
  'ice-800': $ice-800,
  'ice-700': $ice-700,
  'ice-600': $ice-600,
  'ice-500': $ice-500,
  'ice-400': $ice-400,
  'ice-300': $ice-300,
  'ice-200': $ice-200,
  'ice-100': $ice-100,

  'white': $white,
  'black': $black,
);

$fonts-path: '/static/fonts/sofia' !default;

$grid-breakpoints: (
  sm: (null,   640px),
  md: (641px,  960px),
  lg: (961px,  1320px),
  xl: (1321px, null)
);

$grid-gutter: 24px;
$grid-columns: (2, 4, 8, 12);

$display-breakpoints: (
  sm-only: 'screen and (max-width: #{ nth(map-get($grid-breakpoints, sm), 2) })',
  md-only: 'screen and (min-width: #{ nth(map-get($grid-breakpoints, md), 1) }) and (max-width: #{ nth(map-get($grid-breakpoints, md), 2) })',
  lg-only: 'screen and (min-width: #{ nth(map-get($grid-breakpoints, lg), 1) }) and (max-width: #{ nth(map-get($grid-breakpoints, lg), 2) })',
  md: 'screen and (min-width: #{ nth(map-get($grid-breakpoints, md), 1) })',
  lg: 'screen and (min-width: #{ nth(map-get($grid-breakpoints, lg), 1) })',
  xl: 'screen and (min-width: #{ nth(map-get($grid-breakpoints, xl), 1) })',
  md-and-down: 'screen and (max-width: #{ nth(map-get($grid-breakpoints, md), 2) })',
  lg-and-down: 'screen and (max-width: #{ nth(map-get($grid-breakpoints, lg), 2) })',
);

$container-width: 1400px !default;
$sidebar-width: 280px !default;
$min-screen-width: 320px !default;
$top-nav-height: 56px !default;
$logo-height: 22px !default;

$spacer: 12px;
$spacers: (
  0: 0,
  1: $spacer * 0.5,
  2: $spacer,
  3: $spacer * 2,
  4: $spacer * 3,
  5: $spacer * 4,
  6: $spacer * 5
);

@function space($key) {
  @if not map-has-key($spacers, $key) {
    @warn 'No spacer found for `#{$key}`.';

    @return map-get($spacers, 3);
  }

  @return map-get($spacers, $key);
}

$transition: (
  fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1),
  linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1),
  fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1),
  ease-in-out: cubic-bezier(0.4, 0, 0.6, 1),
  fast-in-fast-out: cubic-bezier(0.25, 0.8, 0.25, 1),
  swing: cubic-bezier(0.25, 0.8, 0.5, 1),
);

$transition-durations: (
  snap: 0.1s,
  fast: 0.165s,
  brisk: 0.333s,
  slow: 0.5s,
  sleepy: 1s,
);

$primary-transition:
  map-get($transition-durations, 'fast')
  map-get($transition, swing) !default;
$secondary-transition:
  map-get($transition-durations, 'brisk')
  map-get($transition, ease-in-out) !default;

// TODO: we may consider consolidating one or two of these in the interests of clarity
$z-index: (
  behind: -1,
  content: 100,    // general content on the page
  control: 200,    // for UI controls, widgets, buttons, etc. These are given one level higher priority
  page: 300,       // applies to page-level blocks, ie. site-header, side-nav, etc
  screen: 400,     // covers all "standard" things visible on the screen: page-level blocks, UI/control things, general content
  modal: 1000,     // covers all things except dialogs, including other elements promoted along the z-axis.
  dialog: 1001,    // covers all things, including other elements promoted along the z-axis.
);

$border-radius: 4px;
$borders: (
  thin: 1px,
  medium: 2px,
  thick: 4px
);

$shadow-color: rgba(0, 15, 35, 0.06);

$shadow: (
  none: none,
  low: 0 2px 4px $shadow-color,
  high: 0 4px 8px $shadow-color
);

$font-family-primary: 'Sofia', sans-serif;
$font-family-secondary: serif;
$line-height: 1.5;
$font-weights: (
  regular: 400,
  medium: 500,
  bold: 600
);

$icons: (
  default: (
    height: 24px,
    width: 24px,
  ),
  small: (
    height: 16px,
    width: 16px,
  )
);

/**
 * Breakpoint helper: accepts one of the following options:
 *  'sm-only'
 *  'md-only' | 'md' | 'md-and-down'
 *  'lg-only' | 'lg' | 'lg-and-down'
 *              'xl'
*/
@function breakpoint($value) {
  $str: '';

  @if map-has-key($display-breakpoints, $value) {
    $str: map-get($display-breakpoints, $value);
  } @else {
    @warn 'breakpoint(): "#{$value}" is not defined in your $display-breakpoints setting.';
  }

  @return $str;
}

@mixin breakpoint($value) {
  $str: breakpoint($value);

  @if $str == '' {
    @content;
  } @else {
    @media #{$str} {
      @content;
    }
  }
}

:root {
  --border-radius: 0.25rem;
  --font-size: 16px; // TODO: deprecate
  --grid-gutter: calc(#{$grid-gutter} / 2);
  --shadow-color: rgba(0, 15, 35, 0.06);
  --top-header-height: 56px;
  --sidebar-width: 280px;
  --logo-height: 22px;
  --container-width: 1400px;

  /* Font weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --body-font-weight: var(--font-weight-normal);

  /* Inputs */
  --input-height: 2.25rem;
  --input-font-size: 0.875rem;

  /* Line height */
  --line-height-body: 20px;

  /* Font size */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --font-size-label: 0.875rem;

  @include breakpoint('lg') {
    --grid-gutter: #{$grid-gutter};
  }

  /* Breakpoints */
  --screen-md: 641px;
  --screen-lg: 961px;
  --screen-xl: 1321px;
  --screen-sm-max: 640px;
  --screen-md-max: 960px;
  --screen-lg-max: 1320px;

  /* Stash colors */
  --color-purple: #{$purple};
  --color-purple-900: #{$purple-900};
  --color-purple-800: #{$purple-800};
  --color-purple-700: #{$purple-700};
  --color-purple-600: #{$purple-600};
  --color-purple-500: #{$purple-500};
  --color-purple-400: #{$purple-400};
  --color-purple-300: #{$purple-300};
  --color-purple-200: #{$purple-200};
  --color-purple-100: #{$purple-100};

  --color-royal: #{$royal};
  --color-royal-900: #{$royal-900};
  --color-royal-800: #{$royal-800};
  --color-royal-700: #{$royal-700};
  --color-royal-600: #{$royal-600};
  --color-royal-500: #{$royal-500};
  --color-royal-400: #{$royal-400};
  --color-royal-300: #{$royal-300};
  --color-royal-200: #{$royal-200};
  --color-royal-100: #{$royal-100};

  --color-blue: #{$blue};
  --color-blue-900: #{$blue-900};
  --color-blue-800: #{$blue-800};
  --color-blue-700: #{$blue-700};
  --color-blue-600: #{$blue-600};
  --color-blue-500: #{$blue-500};
  --color-blue-400: #{$blue-400};
  --color-blue-300: #{$blue-300};
  --color-blue-200: #{$blue-200};
  --color-blue-100: #{$blue-100};

  --color-teal: #{$teal};
  --color-teal-900: #{$teal-900};
  --color-teal-800: #{$teal-800};
  --color-teal-700: #{$teal-700};
  --color-teal-600: #{$teal-600};
  --color-teal-500: #{$teal-500};
  --color-teal-400: #{$teal-400};
  --color-teal-300: #{$teal-300};
  --color-teal-200: #{$teal-200};
  --color-teal-100: #{$teal-100};

  --color-green: #{$green};
  --color-green-900: #{$green-900};
  --color-green-800: #{$green-800};
  --color-green-700: #{$green-700};
  --color-green-600: #{$green-600};
  --color-green-500: #{$green-500};
  --color-green-400: #{$green-400};
  --color-green-300: #{$green-300};
  --color-green-200: #{$green-200};
  --color-green-100: #{$green-100};

  --color-seafoam: #{$seafoam};
  --color-seafoam-900: #{$seafoam-900};
  --color-seafoam-800: #{$seafoam-800};
  --color-seafoam-700: #{$seafoam-700};
  --color-seafoam-600: #{$seafoam-600};
  --color-seafoam-500: #{$seafoam-500};
  --color-seafoam-400: #{$seafoam-400};
  --color-seafoam-300: #{$seafoam-300};
  --color-seafoam-200: #{$seafoam-200};
  --color-seafoam-100: #{$seafoam-100};

  --color-yellow: #{$yellow};
  --color-yellow-900: #{$yellow-900};
  --color-yellow-800: #{$yellow-800};
  --color-yellow-700: #{$yellow-700};
  --color-yellow-600: #{$yellow-600};
  --color-yellow-500: #{$yellow-500};
  --color-yellow-400: #{$yellow-400};
  --color-yellow-300: #{$yellow-300};
  --color-yellow-200: #{$yellow-200};
  --color-yellow-100: #{$yellow-100};

  --color-orange: #{$orange};
  --color-orange-900: #{$orange-900};
  --color-orange-800: #{$orange-800};
  --color-orange-700: #{$orange-700};
  --color-orange-600: #{$orange-600};
  --color-orange-500: #{$orange-500};
  --color-orange-400: #{$orange-400};
  --color-orange-300: #{$orange-300};
  --color-orange-200: #{$orange-200};
  --color-orange-100: #{$orange-100};

  --color-red: #{$red};
  --color-red-900: #{$red-900};
  --color-red-800: #{$red-800};
  --color-red-700: #{$red-700};
  --color-red-600: #{$red-600};
  --color-red-500: #{$red-500};
  --color-red-400: #{$red-400};
  --color-red-300: #{$red-300};
  --color-red-200: #{$red-200};
  --color-red-100: #{$red-100};

  --color-ice: #{$ice};
  --color-ice-900: #{$ice-900};
  --color-ice-800: #{$ice-800};
  --color-ice-700: #{$ice-700};
  --color-ice-600: #{$ice-600};
  --color-ice-500: #{$ice-500};
  --color-ice-400: #{$ice-400};
  --color-ice-300: #{$ice-300};
  --color-ice-200: #{$ice-200};
  --color-ice-100: #{$ice-100};

  --color-white: #{$white};
  --color-black: #{$black};

  // hover colors (blue/red with 75% opacity)
  --color-blue-hover: #{$blue}BF;
  --color-red-hover: #{$red}BF;
  // hover colors with 12 % alpha
  // TODO: Remove these vars with https://leaflink.atlassian.net/browse/STASH-298
  --color-ice-700-hover: #{$ice-700}1E;
  --color-white-hover: #{$white}1E;
  --button-secondary-blue-hover: #{$blue}1E;
  --button-secondary-red-hover: #{$red}1E;

  /*
    For use in style blocks when a utility wasn't possible to use.
    Todo (tailwind): migrate to @apply .class-name
  */
  --text-xs: 0.75rem; // @apply .text-xs

  /* For backwards compatibility */
  --ll-space-1: #{space(1)};
  --ll-space-2: #{space(2)};
  --ll-space-3: #{space(3)};
  --ll-space-4: #{space(4)};
  --ll-space-5: #{space(5)};
  --ll-space-6: #{space(6)};
}

@function font-weight($weight: regular) {
  @return if(
    map-has-key($font-weights, $weight),
    map-get($font-weights, $weight),
    map-get($font-weights, regular)
  );
}


$typography: (
  h1: (
    line-height: calc(32/24),
    size: 1.5rem,
    weight: map-get($font-weights, 'medium')
  ),
  h2: (
    line-height: calc(28/20),
    size: 1.25rem,
    weight: map-get($font-weights, 'medium')
  ),
  h3: (
    line-height: calc(24/16),
    size: 1rem,
    weight: map-get($font-weights, 'medium')
  ),
  h4: (
    line-height: calc(20/14),
    size: 0.875rem,
    weight: map-get($font-weights, 'medium')
  ),
  body: (
    line-height: calc(20/14),
    size: 0.875rem,
    weight: 400,
  ),
  small: (
    line-height: calc(16/12),
    size: 0.75rem,
    weight: 400,
  ),
  button: (
    line-height: calc(24/14),
    size: 0.875rem,
    weight: 600,
  )
);

@function typo($keys...) {
  @if not map-has-key($typography, nth($keys, 1)) {
    @warn 'No type found for `#{ nth($keys, 1) }`.';
  }

  @return get($typography, $keys...);
}

@function hexToRGB($hexColor) {
  @return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}

$properties: (
  "line-height": "line-height",
  "size": "font-size",
  "weight": "font-weight"
);

@mixin heading-props($size) {
  @each $key, $prop in $properties {
    #{$prop}: typo('h#{$size}', $key);
  }
}

@mixin heading-base {
  color: var(--color-ice-900);
  font-family: $font-family-primary;
}

@mixin heading($level) {
  @include heading-base;
  @include heading-props($level);
}

// TODO: find out, is this needed??
@mixin heading-3 {
  @include heading(3);
}

@function icon($keys...) {
  @if not map-has-key($icons, nth($keys, 1)) {
    @warn 'No type found for `#{ nth($keys, 1) }`.';
  }

  @return get($icons, $keys...);
}

@function get($map, $keys...) {
  @each $key in $keys {
    @if not map-has-key($map, $key) {
      @warn '`#{$key}` not found in `#{$map}`.';
    }
    $map: map-get($map, $key);
  }

  @return $map;
}

@function border($key, $color: $ice) {
  @if not map-has-key($borders, $key) {
    @warn 'No border found for `#{$key}`.';

    @return map-get($borders, 'thin') solid $color;
  }

  @return map-get($borders, $key) solid $color;
}

@function z-index($key) {
  @if not map-has-key($z-index, $key) {
    @warn 'No z-index found for `#{$key}`.';

    @return map-get($z-index, 'base');
  }

  @return map-get($z-index, $key);
}

@function input($key) {
  @if not map-has-key($inputs, $key) {
    @warn 'No input key found for `#{$key}`.';

    @return map-get($inputs, 'height');
  }

  @return map-get($inputs, $key);
}

$inputs: (
  selection-control-size: 20px,
  min-width: 144px, // buttons, form elements
  height: space(4),
  padding-y: space(1),
  padding-x: space(2),
  inner-height: space(3),
);

// stylelint-disable declaration-no-important
@mixin bg-color($color_name, $color_value) {
  // tailwind only applies BG color for the bg- utilities, NOT border.
  .ll-bg-#{$color_name},
  .bg-#{$color_name} {
    background-color: $color_value !important;
    border-color: $color_value !important;
  }
}

@mixin text-color($color_name, $color_value) {
  .color-#{$color_name} {
    color: $color_value !important;
  }

  .text-#{$color_name} {
    color: $color_value !important;
  }
}


@mixin solid {
  background-color: rgba(var(--button-color-rgb), var(--button-opacity, 1));
  border-color: transparent;
  color: rgba(var(--text-color-rgb), 1);

  &:hover,
  &:active {
    --button-opacity: 0.75;
  }

  &[disabled] {
    --button-color-rgb: #{ hexToRGB($ice) } !important;
  }
}

@mixin ghost {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(var(--button-color-rgb), 1);
  color: rgba(var(--text-color-rgb), 1);

  &:hover,
  &:active {
    background-color: rgba(var(--button-hover-color-rgb, var(--button-color-rgb)), .12);
  }

  &[disabled] {
    --button-color-rgb: #{ hexToRGB($ice) } !important;
    --text-color-rgb: #{ hexToRGB($ice) } !important;
  }
}

@mixin color-overrides($hex-color) {
  &.button--primary,
  &.button--secondary {
    --button-color-rgb: #{ hexToRGB($hex-color) };
  }

  &.button--secondary {
    --text-color-rgb: #{ hexToRGB($hex-color) };
    --button-hover-color-rgb: #{ hexToRGB($hex-color) };
  }
}


/* ---------------------------------------
  Grid
---------------------------------------- */

@mixin span($cols) {
  grid-column: span #{$cols} / span #{$cols};
}

@mixin offset($start: 0, $end: 0) {
  @if $start {
    grid-column-start: $start;
  }
  @if $end {
    grid-column-end: $end;
  }
}


/* ---------------------------------------
  Layout helpers
---------------------------------------- */

@mixin cover($scope: absolute) {
  bottom: 0;
  left: 0;
  position: $scope; // absolute | fixed
  right: 0;
  top: 0;
}

@mixin clearfix {
  &::after {
    clear: both;
    content: '';
    display: table;
  }
}

@mixin sticky {
  $sticky-offset: $top-nav-height + space(3);

  max-height: calc(100vh - #{$sticky-offset + space(3)});
  position: sticky; // note: no effect IE11
  top: $sticky-offset;
}

// Constrain a block of text to a fixed number of `$rows`.
// An ellipsis will be shown where the text is clamped.
@mixin clamp($rows: 3) {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: #{$rows};
  overflow: hidden;
}

@mixin input-disabled {
  background-color: var(--color-ice-200) !important;
  border-color: var(--color-ice-500) !important;
  color: var(--color-ice-700) !important;
  pointer-events: none;

  &:active,
  &:focus {
    box-shadow: none !important;
  }
}

@mixin elevation($type) {
  box-shadow: map-get($shadow, $type) !important;
}

@mixin corner {
  background: var(--color-white);
  border-radius: 2px 0;
  height: 12px;
  position: absolute;
  top: -6px;
  transform: rotate(45deg);
  width: 12px;
  z-index: z-index('behind');
}

@mixin screenreader-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}