@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;
@use "@styles/abstracts/placeholders";

.wrapper {
  --icon-size: #{fun.convert-px(30)};

  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  height: var(--btn-size);
  width: calc(var(--btn-size) * 1.2);
  background: var(--color-bg);
  position: relative;

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      background: inherit;
    }

    @include mix.dimensions("md") {
      width: unset;
      height: unset;
    }
  }
}

.label {
  --draw-border-thickness: #{fun.convert-px(5)};
  --draw-border-color1: var(--color-primary-light);
  --draw-border-color2: var(--color-primary-lighter);

  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding: var(--spacing-2xs);

  &:hover {
    @extend %draw-borders;
  }

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      display: none;
    }
  }
}

.checkbox {
  position: absolute;

  // centered checkbox = btn-size - approximated checkbox size / 2
  top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
  left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
  opacity: 0;
  cursor: pointer;

  &:hover {
    ~ .label {
      @extend %draw-borders;
    }
  }

  &:focus {
    ~ .label {
      @extend %draw-borders;
    }
  }

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      display: none;
    }
  }
}

.nav {
  display: flex;
  flex-flow: column wrap;
  place-content: center;
  padding-bottom: var(--toolbar-size);
  position: fixed;
  bottom: 0;
  z-index: -1;
  background: var(--color-bg-opacity);
  box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
  text-align: center;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.8s ease-in-out 0s;

  @include mix.media("screen") {
    @include mix.dimensions("sm") {
      padding-bottom: 0;
      position: absolute;
      bottom: auto;
      left: auto;
      right: auto;
      top: calc(var(--btn-size) + var(--spacing-sm));
      z-index: unset;
      border-bottom-width: fun.convert-px(5);
      transform-origin: 50% -100%;
    }

    @include mix.dimensions("md") {
      background: transparent;
      border: none;
      box-shadow: none;
      position: relative;
      top: 0;
    }
  }
}

.list {
  @extend %reset-list;

  @include mix.media("screen") {
    @include mix.dimensions(null, "2xs", "height") {
      display: grid;
      grid-template-columns: min-content min-content;
      max-height: calc(100vh - var(--toolbar-size));
    }

    @include mix.dimensions("md") {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      gap: var(--spacing-2xs);
    }
  }
}

.link {
  --draw-border-thickness: #{fun.convert-px(4)};
  --draw-border-color1: var(--color-primary-light);
  --draw-border-color2: var(--color-primary-lighter);

  display: block;
  min-width: fun.convert-px(85);
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
  background: var(--color-bg);
  background-repeat: no-repeat;
  font-size: var(--font-size-sm);
  font-variant: small-caps;
  font-weight: 600;
  text-decoration: none;

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      margin: 0;
      background-color: inherit;
      border-radius: 8%;
    }
  }

  &:hover,
  &:focus {
    @extend %draw-borders;
  }

  &:focus {
    color: var(--color-primary-light);
  }

  &:active {
    --draw-border-color1: var(--color-primary-dark);
    --draw-border-color2: var(--color-primary-light);

    @extend %draw-borders;
  }

  &.current {
    background-image: linear-gradient(to right, transparent, transparent),
      linear-gradient(to bottom, transparent, transparent),
      linear-gradient(
        to left,
        var(--color-primary-lighter),
        var(--color-primary-light)
      ),
      linear-gradient(to top, transparent, transparent);
    background-position: top left, top right, bottom center, bottom left;
    background-size: 0% var(--draw-border-thickness),
      var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
      var(--draw-border-thickness) 0%;

    &:hover,
    &:focus {
      --draw-border-color1: var(--color-primary-light);
      --draw-border-color2: var(--color-primary-lighter);

      @extend %draw-borders;
    }

    &:active {
      --draw-border-color1: var(--color-primary-dark);
      --draw-border-color2: var(--color-primary-light);

      @extend %draw-borders;
    }
  }
}

.checkbox:not(:checked) {
  ~ .nav {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100vw);

    @include mix.media("screen") {
      @include mix.dimensions("sm") {
        transform: perspective(20rem) translate3d(0, 100%, -20rem);
      }

      @include mix.dimensions("md") {
        opacity: 1;
        visibility: visible;
        transform: none;
      }
    }
  }
}

.checkbox:checked {
  ~ .label:hover {
    span {
      background: none;
      box-shadow: none;
    }
  }

  &:hover {
    ~ .label {
      span {
        background: none;
        box-shadow: none;
      }
    }
  }
}