@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/type';
@import "~@openmrs/esm-styleguide/src/vars";

.expandedTabsParentContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: spacing.$spacing-05;
}

.expandedTabsContainer {
  display: flex;
  flex-direction: row;

  :global(.cds--tabs) {
    margin: 1rem 0;
    width: 20%;
    max-height: 8rem !important;
  }

  :global(.cds--tab--list) {
    flex-direction: column !important;
  }

  :global(.cds--tab-content) {
    margin: 1rem 0;
    width: 100% !important;
  }

  :global(.cds--tabs__nav-link) {
    border-bottom: 0 !important;
    border-left: 3px solid $ui-03 !important;
  }

  :global(.cds--tabs__nav-item--selected) {
      border-bottom: 0px !important;
      border-left: 3px solid var(--brand-03) !important;
  }

  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
    margin-left: 0rem !important;
  }

  >ul {
    flex-direction: column !important;
  }

  >ul>li button {
    width: 12rem !important;
  }

  :global(.cds--tabs__nav-link) {
    max-width: 12rem !important;
  }
}