/*
############     _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";

#{class-vars.$base-class} {
  /* color */
  /* ######## Pick these colors to match your desired style ######## */
  --primary-color: #{color-swatches.$red-rock-05};
  --primary-color-dark: #{color-swatches.$red-rock-01};
  --primary-color-light: #{color-swatches.$red-rock-17};
  --gray-on-primary-color: #474747;

  --secondary-color: #{color-swatches.$celadon-blue-05};
  --secondary-color-dark: #{color-swatches.$celadon-blue-00};
  --secondary-color-light: #{color-swatches.$celadon-blue-17};
  --gray-on-secondary-color: #474747;

  --accent-color: #{color-swatches.$electric-yellow-05};
  --accent-color-dark: #{color-swatches.$electric-yellow-00};
  --accent-color-light: #{color-swatches.$electric-yellow-17};
  --gray-on-accent-color: #474747;

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

  /* ######## --------------------------------------------- ######## */

  --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%);
  }
}