@use "sass:map";
@use "../../../styles/tools/convert";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/base";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/visibility" as visibility;
@use "../../Container/styles/mixins" as container;
@use "../../Accordion/styles/mixins" as accordionMixins;
@use "../../../styles/typography/mixins" as typography;
@use "../../../styles/typography/config" as typographyConfig;

@mixin globals {
  .sr-only {
    @include visibility.visually-hidden;
  }

  a {
    color: var(--color-text-default);
    text-decoration: none;
    font-size: inherit;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
      text-underline-offset: convert.to-rem(2px);
      text-decoration-thickness: auto;
    }

    &:focus-visible {
      outline: 2px solid var(--color-border-accent);
      outline-offset: 2px;
    }
  }

  a[href],
  area[href],
  input,
  select,
  textarea,
  button,
  [type="button"],
  iframe,
  [tabindex]:not([tabindex="-1"]),
  [contentEditable="true"] {
    @include base.focusring;
  }

  * {
    box-sizing: border-box;
  }

  ::selection {
    background-color: base.$selection-background;
    color: base.$text-color;
  }

  hr {
    margin-top: convert.to-rem(30px);
    margin-bottom: convert.to-rem(30px);
    border: 0;
    border-top: 1px solid var(--color-border-subtle);

    @include breakpoint.get("xs", "down") {
      margin-top: convert.to-rem(15px);
      margin-bottom: convert.to-rem(15px);
    }
  }
}

@mixin base {
  font-size: 1rem;
  letter-spacing: convert.to-rem(-0.1px);
  line-height: convert.to-rem(18px);
  color: var(--color-text-default);
  background-color: var(--color-surface-primary);
  box-sizing: border-box;
  font-family: #{base.$font-family};
  padding: convert.to-rem(60px) 0;

  @include breakpoint.get("md", "down") {
    padding: convert.to-rem(30px) 0;
  }

  :where(p),
  :where(ul) {
    font-size: convert.to-rem(14px);
    line-height: convert.to-rem(17.5px);
  }
}

@mixin container {
  @include container.base;

  margin-top: 0;
  margin-bottom: 0;
}

@mixin menu {
  display: grid;
  row-gap: convert.to-rem(30px);
  grid-template-columns: repeat(1, 1fr);

  @include breakpoint.get("xs", "down") {
    row-gap: 0;
    margin-bottom: convert.to-rem(30px);
  }

  @include breakpoint.get("sm") {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint.get("md") {
    grid-template-columns: repeat(3, 1fr);
    gap: convert.to-rem(20px);
    row-gap: convert.to-rem(20px);
  }

  @include breakpoint.get("lg") {
    grid-template-columns: repeat(4, 1fr);
    gap: convert.to-rem(30px);
    row-gap: convert.to-rem(40px);
  }
}

@mixin menu-section {
  @include breakpoint.get("xs", "down") {
    @include accordionMixins.item;

    &:first-child {
      border-top: 0;
    }

    &:last-child {
      border-bottom: 1px solid var(--color-border-strong);
    }

    .footer__list {
      margin-top: convert.to-rem(10px) !important;
    }
  }
}

@mixin logo {
  display: inline-flex;
}

@mixin title {
  @include generate.responsive-css-map(map.get(typographyConfig.$headings, 5));
  margin-top: 0;
  margin-bottom: convert.to-rem(30px);
  color: var(--color-text-default);
  font-weight: 700;

  @include breakpoint.get("md", "down") {
    margin-bottom: convert.to-rem(25px);
  }
}

@mixin accordion-toggle {
  margin: 0;
  margin-bottom: convert.to-rem(30px);
  padding: 0;
  border: 0;
  width: 100%;
  text-align: left;
  background: transparent;

  @include breakpoint.get("sm") {
    display: block;
    pointer-events: none;
  }

  @include breakpoint.get("xs", "down") {
    @include accordionMixins.button-base;
    gap: convert.to-rem(12px);
    padding: convert.to-rem(15px) 0;
    margin-bottom: 0;

    .footer__title {
      margin: 0;
    }
  }
}

@mixin accordion-icon {
  @include accordionMixins.icon;

  @include breakpoint.get("sm") {
    display: none;
  }
}

@mixin accordion-list {
  @include breakpoint.get("xs", "down") {
    @include accordionMixins.body;
  }
}

@mixin list {
  @include typography.list-unstyled;

  li {
    margin-bottom: convert.to-rem(10px);
  }
}

@mixin list-space-small {
  gap: convert.to-rem(10px);
}

@mixin list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: convert.to-rem(20px);
  row-gap: convert.to-rem(10px);

  li {
    margin: 0;
  }
}

@mixin list-stack-sm-down {
  @include breakpoint.get("sm", "down") {
    flex-direction: column;
    align-items: flex-start;
    gap: convert.to-rem(10px);
  }
}

@mixin list-break-sm-down() {
  display: none;
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;

  @include breakpoint.get("sm", "down") {
    display: block;
  }
}

@mixin list-item-lead {
  margin-right: convert.to-rem(10px) !important;

  @include breakpoint.get("sm", "down") {
    margin-right: 0 !important;
  }
}

@mixin bar {
  display: flex;
  gap: space.get();
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  @include breakpoint.get("sm", "down") {
    flex-direction: column;
    align-items: flex-start;
  }
}

@mixin bottom {
  display: grid;
  gap: convert.to-rem(30px);
  row-gap: convert.to-rem(40px);
  grid-template-columns: repeat(1, 1fr);
  align-items: end;

  @include breakpoint.get("md") {
    grid-template-columns: 3fr 1fr;
  }
}

@mixin bottom-copyright {
  text-align: right;
  @include generate.css-map(map.get(typographyConfig.$caption, "small"));

  @include breakpoint.get("md", "down") {
    text-align: inherit;
  }
}