// 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 {
  .structural {
    background-color: var(--terra-tabs-structural-container-background-color, #fff);
    flex-direction: row;

    // Content div of content container component
    > :nth-child(2) {
      background-clip: content-box;
      background-color: var(--terra-tabs-structural-content-background-color, #fff);
      background-image: var(--terra-tabs-structural-content-background-image);
      border-radius: var(--terra-tabs-structural-content-border-radius, 0);
      box-shadow: var(--terra-tabs-structural-content-box-shadow, 0);
      // Used to make the content sit above the tab to block the box shadow that can be applied
      z-index: var(--terra-tabs-structural-content-z-index, 0);
    }

    .collapsed-tabs-container {
      border-bottom-color: var(--terra-tabs-structural-collapsed-border-bottom-color, #dddedf);
      border-bottom-style: solid;
      border-bottom-width: var(--terra-tabs-structural-collapsed-border-bottom-width, 1px);
      border-radius: var(--terra-tabs-structural-collapsed-border-radius, 0);

      .tab,
      .tab-menu {
        position: var(--terra-tabs-structural-collapsed-position, static);
        // Typically we use the background image to set a blue stripe and animate it...
        // However in the scenario where you need to also set the background image as a gradient to give a transparent
        // affect and make it 100% height, but you then can't use it for the blue stripe.
        &::before {
          background: var(--terra-tabs-structural-collapsed-before-content-background, none);
          content: '';
          display: block;
          height: var(--terra-tabs-structural-collapsed-before-content-height, 0);
          left: 0;
          position: absolute;
          top: 0;
          width: 0%;
        }
      }

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

      .tab-menu.is-active {
        background-size: var(--terra-tabs-collapsed-tab-menu-active-background-size, 0 0);
      }

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

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

      .tab,
      .tab-menu {
        position: var(--terra-tabs-structural-position, static);
        // Typically we use the background image to set a blue stripe and animate it...
        // However in the scenario where you need to also set the background image as a gradient to give a transparent
        // affect and make it 100% height, but you then can't use it for the blue stripe.
        &::before {
          background: var(--terra-tabs-structural-before-content-background, none);
          content: '';
          display: block;
          height: var(--terra-tabs-structural-before-content-height, 0);
          left: 0;
          position: absolute;
          top: 0;
          width: 0%;
        }
      }
    }

    //Extended Tabs
    &.tab-fill .collapsible-tabs-container:not(.is-calculating) {
      .tab,
      .tab-menu {
        border-radius: var(--terra-tabs-structural-extended-tabs-border-radius);
        flex: 1 1 auto;
      }
    }

    .tab,
    .tab-menu {
      background-color: var(--terra-tabs-structural-background-color, #fff);
      background-image: var(--terra-tabs-structural-background-image, linear-gradient(to bottom, #006fc3, #006fc3));
      background-position: var(--terra-tabs-structural-background-position, 0 100%);
      background-repeat: no-repeat;
      background-size: var(--terra-tabs-structural-background-size, 0 2px);
      border-color: var(--terra-tabs-structural-border-color, #dedfe0);
      border-radius: var(--terra-tabs-structural-border-radius, 0);
      border-style: solid;
      border-width: var(--terra-tabs-structural-border-width, 0 1px 0 0);
      box-shadow: var(--terra-tabs-structural-box-shadow);
      color: var(--terra-tabs-structural-color, #006fc3);
      margin-left: var(--terra-tabs-structural-between-tabs-margin-left, 0);
      transition-duration: var(--terra-tabs-structural-transition-duration, 0);
      transition-property: background-size;
      transition-timing-function: var(--terra-tabs-structural-transition-timing-function, ease);

      &.is-active {
        background-color: var(--terra-tabs-structural-active-background-color, #fff);
        background-image: var(--terra-tabs-structural-active-background-image, linear-gradient(to bottom, #006fc3, #006fc3));
        background-size: var(--terra-tabs-structural-active-background-size, 100% 2px);
        box-shadow: var(--terra-tabs-structural-active-box-shadow, none);
        color: var(--terra-tabs-structural-active-color, #000);
        font-weight: var(--terra-tabs-structural-active-font-weight, normal);
        overflow: hidden; //forces :before background-image to honor border-radius clipping.
        position: relative;
        z-index: var(--terra-tabs-structural-active-z-index);

        &::before {
          background-clip: content-box; // Make sure background fully extends
          transition-duration: var(--terra-tabs-structural-active-before-transition-duration, 0);
          transition-property: width;
          transition-timing-function: var(--terra-tabs-structural-active-before-transition-timing-function, ease);
          width: 100%;
        }

        // Same as the selectors below, but due to the specificity, you can override the variables
        // scoped specifically to the active tab
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
          &:hover {
            background-color: var(--terra-tabs-structural-active-hover-background-color, #fff);
            background-image: var(--terra-tabs-structural-active-hover-background-image, linear-gradient(to bottom, #c8cacb, #c8cacb));
            background-size: var(--terra-tabs-structural-active-hover-background-size, 100% 2px);
            color: var(--terra-tabs-structural-active-hover-color, #000);
          }
        }
      }

      &.is-disabled {
        background-color: var(--terra-tabs-structural-disabled-background-color, #fff);
        background-size: 0 0;
        color: var(--terra-tabs-structural-disabled-color, rgba(28, 31, 33, 0.2));
        cursor: default;
        opacity: var(--terra-tabs-structural-disabled-opacity, 1);
      }

      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
        &.is-disabled:hover {
          background-color: var(--terra-tabs-structural-disabled-hover-background-color, #fff);
          background-size: 0 0;
          color: var(--terra-tabs-structural-disabled-hover-color, rgba(28, 31, 33, 0.2));
          cursor: default;
          opacity: var(--terra-tabs-structural-disabled-hover-opacity, 1);
        }
      }


      &.is-disabled .label,
      &.is-disabled svg {
        color: var(--terra-tabs-structural-disabled-label-color, rgba(28, 31, 33, 0.7));
        opacity: var(--terra-tabs-structural-disabled-label-opacity, 0.3);
      }

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

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        border-width: var(--terra-tabs-structural-last-tab-border-width, 0);
      }
    }

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

    .tab-menu:focus {
      background-color: var(--terra-tabs-structural-focus-background-color, #fff);
      background-image: var(--terra-tabs-structural-focus-background-image);
      color: var(--terra-tabs-structural-focus-color, inherit);
      outline: none;
  
      &[data-terra-tabs-show-focus-styles='true'] {
        outline: var(--terra-tabs-structural-focus-outline, 2px dashed #000);
        outline-offset: var(--terra-tabs-structural-focus-outline-offset, -5px);
      }
    }

    /*
    For instances when all three cases are need:
    1. tab is a collapsed tab (becomes tab-menu).
    2. tab-menu contains box shadow that renders on left+right sides.
    3. tab-menu contains bottom border.
    These variables must be used to set the bottom border.
    Otherwise, the outer .collapsed-tabs-container's border-bottom will overlap with the tab-menu's box shadow
    */
    .collapsed-tabs-container .tab-menu,
    .collapsed-tabs-container .tab-menu.is-active,
    .collapsed-tabs-container .tab-menu:focus {
      border-bottom-color: var(--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-color);
      border-bottom-style: solid;
      border-bottom-width: var(--terra-tabs-structural-collapsed-menu-bar-focus-border-bottom-width, 0);
    }
  }
}