// stylelint-disable selector-max-compound-selectors
// stylelint-disable max-nesting-depth
// Themes
@import './clinical-lowlight-theme/Tabs.module';
@import './orion-fusion-theme/Tabs.module';


:local {
  .modular-centered {
    .collapsible-tabs-container {
      justify-content: center;
    }
  }

  .modular-left-aligned {
    .collapsible-tabs-container {
      justify-content: flex-start;
    }
  }

  .modular-left-aligned,
  .modular-centered {
    background-color: var(--terra-tabs-modular-background-color, #fff);

    .collapsed-tabs-container {
      border-bottom-color: var(--terra-tabs-collapsed-modular-tab-bar-border-bottom-color, #dddedf);
      border-bottom-style: solid;
      border-bottom-width: var(--terra-tabs-collapsed-modular-tab-bar-border-bottom-width, 1px);

      .tab-menu:focus {
        outline: none;
      }

      .tab-menu.is-active {
        background-size: 0 0;
        color: var(--terra-tabs-modular-active-color, #000);
        font-weight: normal;
      }

      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
        .tab-menu:hover {
          background-size: 0 0;
          color: var(--terra-tabs-modular-hover-color, #000);
        }
      }
    }

    .collapsible-tabs-container {
      border-bottom-color: var(--terra-tabs-modular-tab-bar-border-bottom-color, #dddedf);
      border-bottom-style: solid;
      border-bottom-width: var(--terra-tabs-modular-tab-bar-border-bottom-width, 1px);
      padding: var(--terra-tabs-modular-tab-bar-padding, 0);
    }

    // Extended Tabs
    &.tab-fill .collapsible-tabs-container:not(.is-calculating) {
      justify-content: space-around;

      .tab,
      .tab-menu {
        flex: var(--terra-tabs-modular-extended-flex, 0 1 auto);
      }
    }

    .tab,
    .tab-menu {
      background-image: var(--terra-tabs-modular-background-image, linear-gradient(to bottom, #006fc3, #006fc3));
      background-position: var(--terra-tabs-modular-background-position, 0 100%);
      background-repeat: no-repeat;
      background-size: var(--terra-tabs-modular-background-size, 0 2px);
      color: var(--terra-tabs-modular-color, #006fc3);

      &.is-active {
        background-size: var(--terra-tabs-modular-active-background-size, 100% 2px);
        color: var(--terra-tabs-modular-active-color, #000);
      }

      &:hover {
        background-image: var(--terra-tabs-modular-hover-background-image, linear-gradient(to bottom, #c8cacb, #c8cacb));
        background-size: var(--terra-tabs-modular-hover-background-size, 100% 2px);
        color: var(--terra-tabs-modular-hover-color, #000);
      }
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
        &.is-disabled:hover {
          background-size: 0 0;
          color: var(--terra-tabs-modular-disabled-hover-color, #c8cacb);
        }
      }

      &.is-disabled {
        background-size: 0 0;
        color: var(--terra-tabs-modular-disabled-hover-color, #c8cacb);
      }
    }

    .tab-menu:focus {
      background-color: var(--terra-tabs-modular-focus-background-color, #fff);
      border-radius: var(--terra-tabs-modular-focus-border-radius, 0);
      outline: none;

      [dir=rtl] & {
        box-shadow: var(--terra-tabs-keyboard-focus-rtl-box-shadow, 0 0 1px 2px #4a90e2);
      }

      [dir=ltr] & {
        box-shadow: var(--terra-tabs-keyboard-focus-ltr-box-shadow, 0 0 1px 2px #4a90e2);
      }
    }

    .collapsible-tabs-container:focus .is-active,
    .tab-menu:focus.is-active {
      background-color: var(--terra-tabs-modular-active-focus-background-color, #fff);
      background-image: var(--terra-tabs-modular-active-focus-background-image, linear-gradient(to bottom, #006fc3, #006fc3));
      border-radius: var(--terra-tabs-modular-active-focus-border-radius, 0);
      position: relative;
      z-index: 1;

      [dir=rtl] & {
        box-shadow: var(--terra-tabs-active-focus-rtl-box-shadow, 0 0 1px 2px #4a90e2);
      }

      [dir=ltr] & {
        box-shadow: var(--terra-tabs-active-focus-ltr-box-shadow, 0 0 1px 2px #4a90e2);
      }
    }

    .selection-bar {
      background-color: var(--terra-tabs-modular-selection-bar-background-color, #fff);
      display: block;
      height: var(--terra-tabs-modular-selection-bar-height, 0);
      position: relative;
      top: -2px;
      transition: var(--terra-tabs-modular-selection-bar-transition, none);
    }
  }
}