/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "../style/index";
@import "../icons/variables";

@mixin uicore-tabs {

  display:            block;
  list-style:         none;
  padding:            0;
  margin:             0;
  box-sizing:         border-box;
  border:             none;
  outline:            none;

  > li {

    display:        block;
    position:       relative;
    padding:        0;
    margin:         0;

    &.core-tab-item-disabled {
      pointer-events: none;
    }

    > a {

      display:        block;
      position:       relative;
      padding:        $uicore-bordered-padding ( $uicore-font-size - 1px ) $uicore-unbordered-padding;
      margin:         0;
      line-height:    $uicore-line-height;
      color:          $buic-text-color;
      cursor:         pointer;

      .uicore-tabs-inline-label {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;

        &.core-tab-item-disabled {
          color: $buic-foreground-disabled;
        }

        .uicore-tabs-icon {
          width: ( $uicore-icons-small + 12px );
          height: ( $uicore-icons-small + 12px );
          display: flex;
          align-items: center;
        }
      }

      &::after {

        content:            "";
        position:           absolute;
        z-index:            1;
        transition:         all 0.15s;
        top:                0;
        left:               0;
        background:         $buic-foreground-primary;
        opacity:            0;
      }

      &:hover {

        text-decoration:    none;
        color:              $buic-foreground-activehover;

        &::after {

          opacity:        1;
        }
      }
    }

    &.core-active {

      > a {

        font-weight:        $uicore-font-weight-bold;

        &::after {

          opacity:        1;
        }
      }
    }

    .uicore-tabs-label-subLabel-container {
      display: flex;
      flex-direction: column;
      .uicore-tabs-subLabel {
        font-size: $uicore-font-size-small;
        font-weight: $uicore-font-weight-semibold;
      }
    }
    &:not(.core-active) {
      .uicore-tabs-label-subLabel-container {
        .uicore-tabs-subLabel {
          color: $buic-text-color-muted;
          font-weight: $uicore-font-weight-light;
        }
      }
    }
  }

  &.uicore-tabs-green > li > a::after {
    background-color:     $buic-foreground-success;
  }
}