@import "./mixins.scss";
@import "./variables.scss";

.naContainer {
  /*************************************
	Defaults
	**************************************/
  --font-moderat: "Moderat", "sans-serif";
	--font-moderat-mono: "Moderat Mono", "sans-serif";

  --color-white: #fff;
  --color-rgb-white: 255, 255, 255;
  --color-gray-xxlight: #f4f4f4;
  --color-footer-legal: rgba(255, 255, 255, 0.5);

  --default-border-radius: 0px;
  --default-input-border-radius: 20px;
  --default-input-min-height: 48px;
  --default-transition-speed: 0.2s;
  --default-transition-easing: ease-in-out;
  --default-transition-params: var(--default-transition-speed)
    var(--default-transition-easing);
  --default-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  --default-input-border-radius: var(--default-border-radius);
  --default-border-color: var(--color-gray-xxlight);

  --anchor-link-normal-color: var(--color-white);
  --anchor-link-hover-color: rgba(var(--color-rgb-white), 0.8);

  /*************************************
	z-index
	**************************************/
  --z-root: 0;
  --z-header: calc(var(--z-root) + 10);
  --z-above-all: calc(var(--z-header) + 10);

  /*************************************
	Header
	**************************************/
  --header-height: 62px;

  @include media-min($large) {
    --header-height: 86px;
  }

  --header-transition-speed: calc(var(--default-transition-speed) * 2);

  /*************************************
	Layout
	**************************************/
  --container-margin: 1.6rem;
  --container-max-width: calc(100vw - calc(var(--container-margin) * 2));
  --grid-column-gutter: 1.6rem;

  @include media-min($medium) {
    --grid-column-gutter: 3.2rem;
    --container-margin: 3.2rem;
  }

  @include media-min($large) {
    --container-margin: 6.4rem;
  }

  @include media-min($xlarge) {
    --container-max-width: var(--global-width);
  }

  /*************************************
	Buttons
	*************************************/
  --button-primary-normal-bg-color: #000;
  --button-primary-normal-text-color: #fff;
  --button-primary-hover-text-color: #fff;
  --button-primary-hover-bg-color: #dc150b;

  --button-primary-disabled-bg-color: var(--color-gray-xlight);
  --button-primary-disabled-border-color: var(--color-gray-xlight);
  --button-primary-disabled-text-color: var(--color-white);

  --button-secondary-normal-text-color: #000;
  --button-secondary-hover-bg-color: #000;
  --button-secondary-hover-arrow-color: #fff;
}