/*
############     _settings-index.scss      ############
variables and settings
*/

@forward "class-vars";
@use "class-vars";
@forward "spacing";
@use "spacing";
@forward "grid";
@use "grid";
@forward "font-stuff";
@use "font-stuff";
@forward "color-swatches";
@use "color-swatches";
@forward "icons";
@use "icons";
@forward "media-size-vars";
@use "media-size-vars";

:root {
  /* ######## ---------- Branding --------- ######## */
  --utah-brand-primary-color-blue-dark: #{color-swatches.$branding-blue-dark};
  --utah-brand-primary-color-blue-medium: #{color-swatches.$branding-blue-medium};
  --utah-brand-primary-color-blue-light: #{color-swatches.$branding-blue-light};
  --utah-brand-primary-color-gold-light: #{color-swatches.$branding-gold-light};
  --utah-brand-primary-color-gold-medium: #{color-swatches.$branding-gold-medium};
  --utah-brand-primary-color-red: #{color-swatches.$branding-red};

  --utah-brand-secondary-color-clay-00: #{color-swatches.$clay-00};
  --utah-brand-secondary-color-clay-01: #{color-swatches.$clay-01};
  --utah-brand-secondary-color-clay-02: #{color-swatches.$clay-02};
  --utah-brand-secondary-color-clay-03: #{color-swatches.$clay-03};
  --utah-brand-secondary-color-clay-04: #{color-swatches.$clay-04};
  --utah-brand-secondary-color-clay-05: #{color-swatches.$clay-05};

  --utah-brand-secondary-color-green-00: #{color-swatches.$green-00};
  --utah-brand-secondary-color-green-01: #{color-swatches.$green-01};
  --utah-brand-secondary-color-green-02: #{color-swatches.$green-02};
  --utah-brand-secondary-color-green-03: #{color-swatches.$green-03};
  --utah-brand-secondary-color-green-04: #{color-swatches.$green-04};
  --utah-brand-secondary-color-green-05: #{color-swatches.$green-05};

  --utah-brand-secondary-color-teal-00: #{color-swatches.$teal-00};
  --utah-brand-secondary-color-teal-01: #{color-swatches.$teal-01};
  --utah-brand-secondary-color-teal-02: #{color-swatches.$teal-02};
  --utah-brand-secondary-color-teal-03: #{color-swatches.$teal-03};
  --utah-brand-secondary-color-teal-04: #{color-swatches.$teal-04};
  --utah-brand-secondary-color-teal-05: #{color-swatches.$teal-05};

  --utah-brand-secondary-color-blue-00: #{color-swatches.$blue-00};
  --utah-brand-secondary-color-blue-01: #{color-swatches.$blue-01};
  --utah-brand-secondary-color-blue-02: #{color-swatches.$blue-02};
  --utah-brand-secondary-color-blue-03: #{color-swatches.$blue-03};
  --utah-brand-secondary-color-blue-04: #{color-swatches.$blue-04};
  --utah-brand-secondary-color-blue-05: #{color-swatches.$blue-05};

  --utah-brand-secondary-color-violet-00: #{color-swatches.$violet-00};
  --utah-brand-secondary-color-violet-01: #{color-swatches.$violet-01};
  --utah-brand-secondary-color-violet-02: #{color-swatches.$violet-02};
  --utah-brand-secondary-color-violet-03: #{color-swatches.$violet-03};
  --utah-brand-secondary-color-violet-04: #{color-swatches.$violet-04};
  --utah-brand-secondary-color-violet-05: #{color-swatches.$violet-05};

  --utah-brand-secondary-color-raspberry-00: #{color-swatches.$raspberry-00};
  --utah-brand-secondary-color-raspberry-01: #{color-swatches.$raspberry-01};
  --utah-brand-secondary-color-raspberry-02: #{color-swatches.$raspberry-02};
  --utah-brand-secondary-color-raspberry-03: #{color-swatches.$raspberry-03};
  --utah-brand-secondary-color-raspberry-04: #{color-swatches.$raspberry-04};
  --utah-brand-secondary-color-raspberry-05: #{color-swatches.$raspberry-05};

  --utah-brand-secondary-color-red-00: #{color-swatches.$red-00};
  --utah-brand-secondary-color-red-01: #{color-swatches.$red-01};
  --utah-brand-secondary-color-red-02: #{color-swatches.$red-02};
  --utah-brand-secondary-color-red-03: #{color-swatches.$red-03};
  --utah-brand-secondary-color-red-04: #{color-swatches.$red-04};
  --utah-brand-secondary-color-red-05: #{color-swatches.$red-05};

  --utah-brand-secondary-color-orange-00: #{color-swatches.$orange-00};
  --utah-brand-secondary-color-orange-01: #{color-swatches.$orange-01};
  --utah-brand-secondary-color-orange-02: #{color-swatches.$orange-02};
  --utah-brand-secondary-color-orange-03: #{color-swatches.$orange-03};
  --utah-brand-secondary-color-orange-04: #{color-swatches.$orange-04};
  --utah-brand-secondary-color-orange-05: #{color-swatches.$orange-05};

  --utah-brand-secondary-color-yellow-00: #{color-swatches.$yellow-00};
  --utah-brand-secondary-color-yellow-01: #{color-swatches.$yellow-01};
  --utah-brand-secondary-color-yellow-02: #{color-swatches.$yellow-02};
  --utah-brand-secondary-color-yellow-03: #{color-swatches.$yellow-03};
  --utah-brand-secondary-color-yellow-04: #{color-swatches.$yellow-04};
  --utah-brand-secondary-color-yellow-05: #{color-swatches.$yellow-05};
  /* ######## --------------------------------------------- ######## */
}

#{class-vars.$base-class} {
  /* color */
  /* ######## Pick these colors to match your desired style ######## */
  --primary-color: var(--utah-brand-primary-color-blue-medium);
  --primary-color-dark: var(--utah-brand-primary-color-blue-dark);
  --primary-color-light: var(--utah-brand-primary-color-blue-light);
  --gray-on-primary-color: white;

  --secondary-color: var(--utah-brand-secondary-color-teal-03);
  --secondary-color-dark: var(--utah-brand-secondary-color-teal-05);
  --secondary-color-light: var(--utah-brand-secondary-color-teal-00);
  --gray-on-secondary-color: #474747;

  --accent-color: var(--utah-brand-primary-color-gold-light);
  --accent-color-dark: var(--utah-brand-primary-color-gold-medium);
  --accent-color-light: var(--utah-brand-secondary-color-yellow-00);
  --gray-on-accent-color: #474747;

  --form-ele-color: #{color-swatches.$azul-05};
  --form-ele-color-light: #{color-swatches.$azul-12};
  --form-ele-color-dark: #{color-swatches.$azul-02};
  --form-ele-disabled-color: #{color-swatches.$neutral-gray-10};
  --form-ele-placeholder-color: #757575;

  --header-primary-color: var(--primary-color);
  --header-primary-color-dark: var(--primary-color-dark);
  --header-title-color: var(--utah-brand-primary-color-blue-dark);
  --notifications-drawer-color: var(--form-ele-color);
  --notifications-drawer-color-dark: var(--form-ele-color-dark);

  --gray-color: #{color-swatches.$neutral-gray-04};
  --gray-medium-color: #{color-swatches.$neutral-gray-06};
  --gray-3-1-contrast: #{color-swatches.$neutral-gray-10};
  --gray-medium-light-color: #{color-swatches.$neutral-gray-15};
  --gray-light-color: #{color-swatches.$neutral-gray-17};
  --gray-dark-color: #{color-swatches.$neutral-gray-02};
  --disabled-gray: rgba(0, 0, 0, 0.05);

  --hover-gray-color: rgba(0, 0, 0, 0.07);
  --hover-gray-color-opaque: rgba(233, 233, 233);

  --code-color: #{color-swatches.$neutral-gray-17};
  --gray-border: #{color-swatches.$neutral-gray-15};

  --danger-color: #ba0000;
  --warning-color: #ba6300;
  --info-color: var(--secondary-color);
  --success-color: #2f8700;

  --badge-color: var(--danger-color);

  /* transition timings */
  --timing-xquick: 100ms;
  --timing-quick: 200ms;
  --timing-medium: 400ms;
  --timing-slow: 600ms;

  /* rounded corners */
  --radius-small1x: 3px;
  --radius-small: 6px;
  --radius-medium: 9px;
  --radius-large: 12px;
  --radius-circle: 999px;

  /* form element sizes */
  --form-ele-small4x: 0.75rem; //small switch
  --form-ele-small3x: 1rem;
  --form-ele-small2x: 1.25rem;
  --form-ele-small1x: 1.5rem; //small1x button
  --form-ele-small: 1.875rem; //small button
  --form-ele-medium: 2.25rem; //medium button
  --form-ele-large: 2.5rem; //large button
  --form-ele-large1x: 3.125rem; //large1x button

  --form-checkbox-small: 0.875rem;
  --form-checkbox-medium: 1.125rem;
  --form-checkbox-large: 1.375rem;

  /* content layout sizes */
  --content-width-narrow: 808px;
  --content-width-medium: 1016px;
  --content-width: 1224px;
  --content-width-wide: 1432px;
  --documentation-width: 700px;
  --documentation-left-width: 200px;
  --documentation-right-width: 200px;
  --documentation-padding: var(--spacing-2xl) var(--spacing-xl);
  --documentation-padding-small: var(--spacing-xl) var(--spacing);

  /* elevation box shadows */
  --drop-shadow-color: rgba(0, 0, 0, 0.3);
  --drop-shadow-color-top: rgba(0, 0, 0, 0.15);
  --elevation-small: 0 3px 6px var(--drop-shadow-color);
  --elevation-medium: 0 6px 12px var(--drop-shadow-color);
  --elevation-large: 0 12px 16px var(--drop-shadow-color);
  --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);

  /* color utility classes */
  .primary-color-background {
    background-color: var(--primary-color);
  }
  .primary-color-dark-background {
    background-color: var(--primary-color-dark);
  }
  .primary-color-light-background {
    background-color: var(--primary-color-light);
  }
  .gray-on-primary-background {
    background-color: var(--gray-on-primary-color);
  }

  .primary-color {
    color: var(--primary-color);
  }
  .primary-color-border {
    border-color: var(--primary-color);
  }

  .secondary-color-background {
    background-color: var(--secondary-color);
  }
  .secondary-color-dark-background {
    background-color: var(--secondary-color-dark);
  }
  .secondary-color-light-background {
    background-color: var(--secondary-color-light);
  }
  .gray-on-secondary-background {
    background-color: var(--gray-on-secondary-color);
  }

  .secondary-color {
    color: var(--secondary-color);
  }
  .secondary-color-border {
    border-color: var(--secondary-color);
  }

  .accent-color-background {
    background-color: var(--accent-color);
  }
  .accent-color-dark-background {
    background-color: var(--accent-color-dark);
  }
  .accent-color-light-background {
    background-color: var(--accent-color-light);
  }
  .gray-on-accent-background {
    background-color: var(--gray-on-accent-color);
  }

  .accent-color {
    color: var(--accent-color);
  }
  .accent-color-border {
    border-color: var(--accent-color);
  }

  .white-color-background {
    background-color: white;
  }

  .gray-color-background {
    background-color: var(--gray-color);
  }
  .gray-color-light-background {
    background-color: var(--gray-light-color);
  }

  .white-color {
    color: white;
  }

  .background-frosted-dark {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px) brightness(1.5);
    -webkit-backdrop-filter: blur(16px) brightness(1.5);
  }

  .background-frosted-light {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .backdrop-dark {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px) brightness(60%);
  }
}