@import '~terra-mixins/lib/Mixins';
@import '../clinical-lowlight-theme/Tab.module';
@import '../orion-fusion-theme/Tab.module';

:local {
  .tab,
  .tab-menu {
    background-color: var(--terra-application-workspace-tab-background-color, transparent);
    background-image: var(--terra-application-workspace-tab-background-image, linear-gradient(to bottom, #fff, #dedfe0));
    border: var(--terra-application-workspace-tab-border, 1px solid #868a8c);
    border-bottom: 0;
    border-top-left-radius: var(--terra-application-workspace-tab-border-top-left-radius, 3px);
    border-top-right-radius: var(--terra-application-workspace-tab-border-top-right-radius, 3px);
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: var(--terra-application-workspace-tab-height, 33px);
    margin-right: var(--terra-application-workspace-tab-margin-right, 2px);
    min-width: 0;
    outline: none;
    position: relative;
    
    .inner {
      align-items: center;
      display: flex;
      flex: 1 1 auto;
      height: 100%;
      justify-content: space-around;
      overflow: hidden;
      padding-left: 15px;
      padding-right: 15px;
      pointer-events: none;
    }

    .label {
      color: var(--terra-application-workspace-tab-label-color, #595f62);
      flex: 0 1 auto;
      line-height: 1.21428;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      word-wrap: normal;
    }

    .icon {
      color: var(--terra-application-workspace-tab-icon-color, #7a7f82);
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--terra-application-workspace-tab-hover-background-color, transparent);
        background-image: var(--terra-application-workspace-tab-hover-background-image, linear-gradient(to bottom, #fff, #e8e9ea));

        .icon { // stylelint-disable-line max-nesting-depth
          color: var(--terra-application-workspace-tab-hover-icon-color, #64696c);
        }

        .label { // stylelint-disable-line max-nesting-depth
          color: var(--terra-application-workspace-tab-hover-label-color, #434a4d);
        }
      }
    }

    &[data-focus-styles-enabled='true']:focus {
      outline: none;

      &::before {
        border: var(--terra-application-workspace-tab-focus-before-border, 2px dashed #000);
        bottom: var(--terra-application-workspace-tab-focus-before-bottom, 1px);
        box-shadow: var(--terra-application-workspace-tab-focus-before-box-shadow, none);
        content: '';
        left: var(--terra-application-workspace-tab-focus-before-left, 1px);
        position: absolute;
        right: var(--terra-application-workspace-tab-focus-before-right, 1px);
        top: var(--terra-application-workspace-tab-focus-before-top, 1px);
      }
    }

    &.is-active {
      background-color: var(--terra-application-workspace-tab-is-active-background-color, #fff);
      background-image: var(--terra-application-workspace-tab-is-active-background-image, none);
      height: var(--terra-application-workspace-tab-is-active-height, 34px);

      .icon,
      .label {
        margin-top: var(--terra-application-workspace-tab-is-active-icon-label-margin-top, -1px);
      }

      .icon {
        color: var(--terra-application-workspace-tab-is-active-icon-color, #64696c);
      }

      .label {
        color: var(--terra-application-workspace-tab-is-active-label-color, #434a4d);
      }
    }
  }

  .tab {
    flex: 0 1 auto;
    min-width: var(--terra-application-workspace-tab-min-width, 76px);

    .inner {
      text-align: center;
    }
  }

  .tab-menu {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;

    svg {
      flex: 0 0 auto;
      height: var(--terra-application-workspace-tab-menu-svg-height, 0.8571rem);
    }

    &.is-open {
      cursor: default;
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &.is-active:hover:not(.is-open) { // stylelint-disable-line max-nesting-depth
        background-color: var(--terra-application-workspace-tab-menu-is-active-hover-background-color, transparent);
        background-image: var(--terra-application-workspace-tab-menu-is-active-hover-background-image, linear-gradient(to bottom, #f4f4f4, #fff));

        .icon {  // stylelint-disable-line max-nesting-depth
          color: var(--terra-application-workspace-tab-menu-is-active-hover-icon-color, #595f62);
        }
      }
    }
  }

  [data-tab-is-calculating='true'] {
    > .tab {
      flex: 0 0 auto;
    }
  }
}