@import './ModularTabs.module';
@import './StructuralTabs.module';
// Themes
@import './clinical-lowlight-theme/Tabs.module';
@import './orion-fusion-theme/Tabs.module';

:local {  
  .tabs-container {
    width: 100%;
  }

  .collapsible-tabs-container,
  .collapsed-tabs-container {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    width: 100%;

    &:focus {
      outline: none;
    }
  }

  .collapsible-tabs-container.is-calculating {
    visibility: hidden;

    /*
     * During calculations tabs should display with auto size and not grow or shrink in order to get
     * content width for truncation logic
     */
    .tab {
      flex: 0 0 auto;
    }
  }

  .tab,
  .tab-menu {
    cursor: pointer;
    font-size: var(--terra-tabs-font-size, 1rem);
    font-weight: var(--terra-tabs-font-weight, normal);
    line-height: var(--terra-tabs-line-height, 1.4);
    padding: var(--terra-tabs-padding, 0.643rem 1.071rem);
  }

  .tab,
  .tab-menu span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    word-wrap: normal;
  }

  .tab {
    flex: 0 1 auto;
    min-width: 8.357rem;
    text-align: center;

    &[data-terra-tabs-show-focus-styles='true']:focus {
      box-shadow: var(--terra-tabs-focus-box-shadow, none);
      outline: var(--terra-tabs-focus-outline, 2px dashed #000);
      outline-offset: var(--terra-tabs-focus-outline-offset, -2px);
    }

    &.is-icon-only {
      flex: 0 0 auto;
      min-width: 2.571rem;
      padding: 0.5rem 0;
    }

    &.is-text-only {
      min-width: 7.143rem;
      padding: var(--terra-tabs-text-only-padding, 0.643rem 1.071rem);
    }

    .label:nth-child(2) {
      margin-left: var(--terra-tabs-label-next-to-icon-margin-left, 0.357rem);
    }
  }

  .tab-menu {
    align-items: baseline;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 7.143rem;

    span {
      flex: 0 1 auto;
      min-width: 0;
    }

    svg {
      flex: 0 0 auto;
      font-size: 0.571rem;
      margin-left: var(--terra-tabs-menu-arrow-margin-left, 0.5rem);
    }

    .active-tab-icon {  
      margin-right: var(--terra-tabs-menu-icon-margin-right, 0.5rem);
  
      /* stylelint-disable-next-line selector-max-compound-selectors */
      svg {
        font-size: var(--terra-tabs-menu-icon-font-size, 1rem);
      }
    }
  }

  .collapsed-tabs-container .tab-menu {
    justify-content: var(--terra-tabs-menu-collapsed-justify-content, center);

    /* stylelint-disable-next-line selector-max-compound-selectors */
    span {
      white-space: normal;
    }
  }

  .pane-content {
    &.fill-parent {
      height: 100%;
    }
  }
}