@use "config";
@use "mixins";
@use "variables";
@use "utilities";
@use "sass:color";
@use "sass:map";
@use "sass:math";

$tab-height: 3rem;
$tab-color: map.get(variables.$greyscale, "base");
$tab-border-color: color.adjust(
  map.get(variables.$greyscale, "light"),
  $lightness: math.percentage(config.$hue-threshold * 2)
);

.tabs {
  @include mixins.breakpoint(tablet, min) {
    display: flex;
    flex-wrap: wrap;
  }

  * {
    box-sizing: border-box;
  }

  input[type="radio"] {
    appearance: none;
    opacity: 0;
    position: absolute;

    &:checked {
      + .tab {
        border: 1px solid $tab-border-color;
        border-bottom-color: map.get(variables.$greyscale, "white");
        font-weight: 600;

        @include mixins.breakpoint(tablet, max) {
          border-bottom: none;
        }

        @include mixins.breakpoint(tablet, min) {
          background-color: map.get(variables.$greyscale, "white");
          color: $tab-color;

          &:before {
            background-color: $tab-color;
          }
        }

        + .tab-panel {
          display: block;
        }
      }

      &.un-checked {
        + label {
          font-weight: 300;

          + .tab-panel {
            display: none !important;
          }
        }
      }
    }
  }

  .tab {
    align-items: center;
    display: flex;
    height: $tab-height;
    padding: map.get(variables.$spacers, 2) variables.$spacer;
    position: relative;
    transition: ease-in-out var(--transitions);
    transition-property: background-color,
                         border-color,
                         color,
                         font-weight,
                         border-bottom-color;

    @include mixins.breakpoint(tablet, max) {
      border: 1px solid $tab-color;
      background: $tab-color;
      color: map.get(variables.$greyscale, "white");
      margin-top: map.get(variables.$spacers, 1);

      &:first-of-type {
        margin-top: 0;
      }
    }

    @include mixins.breakpoint(tablet, min) {
      flex: 1 1 auto;
      max-width: 16rem;
      border: 1px solid transparent;
      color: map.get(variables.$greyscale, "base");
      cursor: pointer;
      justify-content: center;
      margin-bottom: -1px;
      order: 1;
      z-index: 2;

      &::before {
        background-color: transparent;
        content: "";
        height: 0.3rem;
        left: -1px;
        position: absolute;
        right: -1px;
        top: 0;
        transition: background-color var(--transitions);
        width: auto;
        border: none;
        border-radius: 0;
      }
    }
  }

  input[type="radio"] {
    &:not(:checked) {
      + .tab {
        @media (pointer: fine) {
          &:hover {
            background-color: map.get(variables.$greyscale, "white");
            border-color: $tab-border-color;
            color: $tab-color;
            font-weight: 600;

            @include mixins.breakpoint(tablet, min) {
              border-bottom-color: map.get(variables.$greyscale, "white");
            }
          }
        }
      }
    }
  }

  .tab-panel {
    display: none;
  }
}

.tabs--flat {
  display: block;
  flex-wrap: unset;

  @include mixins.breakpoint(tablet, min) {
    display: flex;
    flex-wrap: wrap;
  }

  input[type="radio"] {
    &:not(:checked) {
      + .tab {
        @media (pointer: fine) {
          &:hover {
            background-color: map.get(variables.$greyscale, "white");
            color: rgba($tab-color, 0.7);
            font-weight: 600;

            &::before {
              background-color: rgba($tab-color, 0.7);
            }
          }
        }
      }
    }

    &:checked {
      + .tab {
        border: 1px solid $tab-border-color;
        border-bottom: none;
        color: map.get(variables.$greyscale, "white");
        font-weight: 600;

        @include mixins.breakpoint(tablet, min) {
          border: none;
          color: $tab-color;
        }

        &:before {
          background-color: $tab-color;
        }
      }
    }
  }

  .tab {
    align-items: center;
    border: 1px solid $tab-color;
    background: $tab-color;
    color: map.get(variables.$greyscale, "white");
    display: flex;
    height: $tab-height;
    margin: map.get(variables.$spacers, 1) 0 0;
    padding: map.get(variables.$spacers, 2) variables.$spacer;
    position: relative;
    transition: var(--transitions);
    transition-property: background-color,
                         color,
                         font-weight;

    &:first-of-type {
      margin-top: 0;
    }

    @include mixins.breakpoint(tablet, min) {
      background: map.get(variables.$greyscale, "white");
      border: none;
      color: map.get(variables.$greyscale, "base");
      flex: 0 0 auto;
      height: auto;
      margin: 0 1rem;
      order: 1;
      z-index: auto;

      &:before {
        background-color: transparent;
        border: none;
        bottom: 0;
        content: "";
        height: 0.3rem;
        left: 0;
        position: absolute;
        right: 0;
        top: unset;
        transition: background-color var(--transitions);
        width: auto;
      }
    }
  }

  .tab-panel {
    background-color: map.get(variables.$greyscale, "white");
    border: 1px solid $tab-border-color;

    @include mixins.breakpoint(tablet, min) {
      border: none;
      border-top: 1px solid $tab-border-color;
      z-index: auto;
    }
  }

  // unresponsive flat tabs
  &.unresponsive {
    @include mixins.breakpoint(tablet, max) {
      display: flex;
      flex-wrap: wrap;
    }

    .tab {
      @include mixins.breakpoint(tablet, max) {
        background: map.get(variables.$greyscale, "white");
        border: none;
        color: map.get(variables.$greyscale, "base");
        flex: 0 0 auto;
        height: auto;
        margin: 0 1rem;
        order: 1;
        z-index: auto;

        &:before {
          background-color: transparent;
          border: none;
          bottom: 0;
          content: "";
          height: 0.3rem;
          left: 0;
          position: absolute;
          right: 0;
          top: unset;
          transition: background-color var(--transitions);
          width: auto;
        }
      }
    }

    input[type="radio"] {
      &:checked {
        + .tab {
          @include mixins.breakpoint(tablet, max) {
            border: none;
            color: $tab-color;
          }
        }
      }
    }

    .tab-panel {
      @include mixins.breakpoint(tablet, max) {
        flex-grow: 1;
        order: 99;
        border: none;
        border-top: 1px solid $tab-border-color;
        z-index: auto;
      }
    }
  }
}

.tab-panel {
  background-color: map.get(variables.$greyscale, "white");
  border: 1px solid $tab-border-color;
  padding: map.get(variables.$spacers, 2);
  position: relative;
  width: 100%;

  @include mixins.breakpoint(tablet, max) {
    border-top: transparent;
  }

  @include mixins.breakpoint(tablet, min) {
    flex-grow: 1;
    order: 99;
    padding-top: calc(#{map.get(variables.$spacers, 2)} + 1px);
    z-index: 1;
  }
}