@use 'sass:map';
@use '../../tokens';
@use '../../utils';

/// get component token
@function _token($token) {
  @return utils.map-get(tokens.$flexy-comp-tabs, $token);
}

.flexy-tabs {
  display: flex;
  flex-direction: column;
  gap: _token('tablist-divider-margin');
  width: 100%;

  &--reverse {
    flex-direction: column-reverse;
  }
}

.flexy-tablist {
  display: flex;
  align-items: center;
  background-color: _token('tablist-fill-color');
  box-shadow: inset 0px calc(-1 * _token('tablist-divider-height')) 0px 0px
    _token('tablist-divider-color');
  border-radius: _token('tablist-shape');
  box-sizing: border-box;
  gap: _token('tablist-spacing');
  height: _token('tablist-height');
  overflow: auto hidden;
  padding: 0px _token('tablist-padding');
  position: relative;
  scrollbar-width: none;

  @each $alignment in (start, center, end) {
    &--align-#{$alignment} {
      justify-content: $alignment;

      .flexy-tab {
        width: auto;
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.flexy-tabs--reverse > .flexy-tablist {
  box-shadow: inset 0px _token('tablist-divider-height') 0px 0px
    _token('tablist-divider-color');
}

.flexy-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: _token('tab-spacing');
  border-radius: _token('tab-shape');
  cursor: pointer;
  height: _token('tab-height');
  position: relative;
  padding: 0px _token('tab-padding');
  width: 100%;
  min-width: max-content;
  -webkit-tap-highlight-color: transparent;

  &::after {
    @include utils.touchable();
  }

  &:hover &__ripple::before {
    opacity: 0.12;
  }

  &[aria-selected='false'] {
    background-color: _token('tab-unselected-fill-color');
    color: _token('tab-unselected-label-color');
  }

  &[aria-selected='true'] {
    background-color: _token('tab-selected-fill-color');
    color: _token('tab-selected-label-color');
  }

  &:focus-visible {
    outline: 2px solid tokens.$flexy-sys-color-primary;
    outline-offset: -2px;
  }
}

.flexy-tab-indicator {
  display: block;
  border-width: _token('tab-indicator-height');
  border-style: none none solid none;
  border-color: _token('tab-indicator-color');
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  transition-property: left, right;
  transition-duration: 300ms;

  &--outlined {
    border-radius: _token('tab-shape');
    border-style: solid;
    bottom: calc(_token('tablist-height') / 2 - _token('tab-height') / 2);
    top: calc(_token('tablist-height') / 2 - _token('tab-height') / 2);
  }
}

.flexy-tabs--reverse > .flexy-tablist > .flexy-tab-indicator {
  top: 0;
  bottom: initial;
}

.flexy-tab-panels {
  display: flex;
  width: 100%;
}

.flexy-tab-panel {
  flex-shrink: 0;
  width: 100%;

  &[hidden] {
    display: none !important;
  }
}