@use '../../core/style/variables';
@use '../tabs-common';

// Wraps each link in the header
.oui-mdc-tab-link {
  // @include tabs-common.tab;

  // Note that we only want to target direct descendant tabs.
  .oui-mdc-tab-header.oui-mdc-tab-nav-bar-stretch-tabs & {
    flex-grow: 1;
  }

  // For the tab-link element, default inset/offset values are necessary to ensure that
  // the focus indicator is sufficiently contrastive and renders appropriately.
  &::before {
    margin: 5px;
  }
}
.oui-mdc-tab-nav-bar {
  display: flex;
  a.oui-mdc-tab-link {
    min-width: 90px;
    justify-content: center;
    box-sizing: border-box;
    outline: none;
    text-align: center;
    white-space: nowrap;
    margin: 0 5px;
    cursor: pointer;
    -webkit-appearance: none;
    z-index: 1;
    flex-grow: 0;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    padding: 19px 20px 10px;
    display: inline-flex;
    position: relative;
    &.cdk-keyboard-focused {
      border: 1px solid #006bb1 !important;
      border-bottom: 0 !important;
    }
    &.active {
      .mdc-tab__content .mdc-tab__text-label {
        color: #333;
      }
    }
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .mdc-tab-indicator {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    .mdc-tab-indicator__content--underline {
      align-self: flex-end;
      box-sizing: border-box;
      width: 100%;
      border-top-style: solid;
    }
  }
  .mdc-tab__content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    pointer-events: none;
    .mdc-tab__text-label {
      transition: 0.15s color linear;
      display: inline-block;
      line-height: 1;
      z-index: 2;
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
      color: #666;
      display: inline-flex;
      align-items: center;
    }
  }
  .oui-mdc-tab-header-pagination {
    display: none;
  }
}