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

.wrapper {
  margin-top: layout.$spacing-03;
}

.bodyShort02 {
  @include type.type-style('body-compact-02');
}

.bodyLong01 {
  @include type.type-style('body-01');
}

.date {
  @include type.type-style('label-01');
  color: $text-02;
  margin: layout.$spacing-03 0 layout.$spacing-02;
}

.visitType {
  @include type.type-style('heading-compact-02');
}

.container {
  background-color: $ui-background;
  border: 1px solid $grey-2;
  padding: layout.$spacing-05;
  margin: layout.$spacing-05 0 layout.$spacing-05;
  width: 100%;
}

.tabs > :global(.cds--tab-content) {
  padding: layout.$spacing-05 0 !important;
}

.header::after {
  content: '';
  display: block;
  width: layout.$spacing-07;
  padding-top: 0.188rem;
  border-bottom: 0.375rem solid var(--brand-03);
}

.visitContainer {
  background-color: $ui-background;
  display: grid;
  grid-template-columns: max-content auto;
}

.flexSections {
  display: flex;
}

.verticalTabs {
  margin: layout.$spacing-04 0;

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

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

.desktopTabs {
  button {
    height: layout.$spacing-07;
  }
}

.tabletTabs {
  button {
    height: layout.$spacing-09;
  }
}

.tab > button {
  border-bottom: 0 !important;
  border-left: 3px solid $ui-03 !important;
}

.tab > button,
.tab > button:focus,
.tab > button:active {
  outline: 0 !important;
  outline-offset: 0 !important;
}

.selectedTab > button {
  border-left: 3px solid var(--brand-03) !important;
  border-bottom: 0 !important;
  font-weight: 600 !important;
}

.tabContent {
  border-top: 1px solid $ui-03;
  padding: layout.$spacing-05 0;
  width: 70%;
}

.textColor {
  color: $color-blue-60-2;
}

.text02 {
  color: $text-02;
}