/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use './core' as *;
@use '../../focus-indicator';
@use '../../state-layer';

//
// Host
//

:host {
  @include host;
}

:host([hidden]) {
  display: none;
}

//
// Base
//

.forge-tab {
  @include tokens;
}

.forge-tab {
  @include tab;

  .content {
    @include content;

    .label {
      @include label;
    }
  }

  .indicator {
    @include indicator;
  }
}

:host, ::slotted(*) {
  white-space: nowrap;
}

forge-focus-indicator {
  @include focus-indicator.provide-theme((
    color: #{token(active-color)},
    shape: 8px
  ));
}

forge-state-layer {
  @include state-layer.provide-theme((
    color: #{token(inactive-color)}
  ));
}

//
// States
//

:host(:focus) {
  .forge-tab {
    @include focus;
  }
}

:host(:active) {
  .forge-tab {
    @include pressed;
  }
}

//
// Disabled
//

:host([disabled]) {
  @include host-disabled;

  .forge-tab {
    @include disabled;

    pointer-events: none;
  }
}

//
// Selected
//

:host([selected]) {
  .forge-tab {
    color: #{token(active-label-text-color)};

    ::slotted([slot=leading]),
    ::slotted([slot=trailing]) {
      color: #{token(active-icon-color)};
    }

    &:hover {
      color: #{token(active-hover-label-text-color)};
    }

    &:hover {
      ::slotted([slot=leading]),
      ::slotted([slot=trailing]) {
        color: #{token(active-hover-icon-color)};
      }
    }
  
    .indicator {
      opacity: 1;
    }
  }

  forge-state-layer {
    @include state-layer.provide-theme((
      color: #{token(active-color)}
    ));
  }
}

:host([selected]:not([vertical])) {
  forge-focus-indicator {
    @include focus-indicator.provide-theme((
      offset-block: 0 calc(#{token(indicator-height)} + 1px)
    ));
  }
}

:host([selected]:focus) {
  .forge-tab {
    @include selected-focus;
  }
}

:host([selected]:active) {
  .forge-tab {
    @include selected-pressed;
  }
}

//
// Stacked
//

:host([stacked]) {
  .forge-tab {
    @include override(height, stacked-height);

    .content {
      @include content-stacked;
    }
  }
}

//
// Secondary
//

:host([secondary]) {
  .forge-tab {
    @include override(indicator-height, secondary-indicator-height);
    @include override(indicator-shape, secondary-indicator-shape);
  }

  .content {
    @include content-secondary;
  }

  .indicator {
    @include indicator-secondary;
  }
}

//
// Vertical
//

:host([vertical]) {
  .forge-tab {
    @include vertical;
  
    .content {
      @include vertical-content;
    }
  
    .indicator {
      @include vertical-indicator;
    }
  }

  forge-focus-indicator {
    @include focus-indicator.provide-theme((
      offset-inline: 0 calc(#{token(indicator-height)} + 1px)
    ));
  }
}

:host([vertical][secondary]) {
  .content {
    @include vertical-secondary-content;
  }
}

:host([vertical]:not([secondary])) {
  .forge-tab {
    @include override(indicator-shape, vertical-indicator-shape);
  }
}

//
// Inverted
//

:host([inverted]) {
  .forge-tab {
    @include override(indicator-shape, inverted-indicator-shape);
  }

  .indicator {
    @include inverted-indicator;
  }
}

:host([inverted][vertical]) {
  .forge-tab {
    @include override(indicator-shape, vertical-inverted-indicator-shape);
  }

  .indicator {
    @include vertical-inverted-indicator;
  }
}
