// @import './ModularTabs.module';
@import './TerraStructuralTabs.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 {
    align-items: center;
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 8.357rem;
    text-align: center;

    @media (max-width: 768px) {
      min-width: 5rem; /* Reduce the minimum width of the tabs */
      padding: 0.643rem 0.5rem; /* Adjust padding for smaller screens */
    }

    &[data-focus-styles-enabled='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.643rem 1.071rem;

      .is-vertical {
        padding: 0;
      }
    }

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

    &[data-terra-tab-draggable='true'] {
      padding: var(--terra-tabs-text-only-draggable-padding, 0.643rem 0.25rem);
      text-align: start;
    }

    .label:nth-child(3) {
      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%;
    }
  }

  .inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    word-wrap: normal;
  }

  .tabs-remove-button {
    background-color: var(--terra-tabs-close-tab-background-color, transparent);
    border: 0;
    border-radius: 0.5714rem;
    color: var(--terra-tabs-remove-button-color, #595f62);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    height: 1rem;
    line-height: 1;
    margin: 0;
    margin-left: 10px;
    min-width: 1.02857rem;
    outline: none;
    padding: 0;
    right: 0;
    @media (max-width: 768px) {
      margin-left: 5px; /* Adjust the margin for smaller screens */
    }
  }

  .draggable-inner {
    align-items: center;
    display: inline-block;
    justify-content: space-around;
  }

  .draggable-icon {
    display: inline;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

}