@use '@carbon/layout';
@use '@openmrs/esm-styleguide/src/vars' as *;

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

// Vertical tabs layout
.verticalTabs {
  display: flex;
  flex-direction: row;

  :global(.cds--tabs) {
    width: 20%;
    min-width: 12rem;
    overflow: visible !important;
  }

  :global(.cds--tabs-trigger-container),
  :global(.cds--tabs--scrollable),
  :global(.cds--tabs--scrollable__nav) {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  :global(.cds--tab--list) {
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  :global(.cds--tabs__nav-item) {
    border-left: 3px solid $ui-03;

    &:global(.cds--tabs__nav-item--selected) {
      border-left-color: var(--brand-03);
    }
  }

  :global(.cds--tabs__nav-link) {
    border-bottom: none !important;
    padding: layout.$spacing-04 layout.$spacing-05 !important;
    max-width: none !important;
    width: 100%;
  }

  :global(.cds--tab-content) {
    flex: 1;
    padding: layout.$spacing-05 0;
    min-height: 8rem;
  }
}