@use "@carbon/styles/scss/spacing";
@use "@carbon/colors";

/* UI Shell Header */
.cds--header {
  @include brand-01(background-color);
  border-bottom: none;
}

.cds--header__action:hover {
  @include brand-02(background-color);
}

.cds--header__action--active {
  @include brand-02(background-color);
  @include brand-02(border-color);
}

.cds--header-panel {
  @include brand-02(background-color);
}

.cds--header__menu-trigger > svg,
.cds--header__menu-trigger:hover > svg,
.cds--btn.cds--btn--icon-only.cds--header__action svg,
.cds--btn.cds--btn--icon-only.cds--header__action:hover svg {
  fill: white;
}

.cds--header-panel--expanded {
  border-left: none;
  border-right: none;
}

/* Side nav */
.cds--side-nav {
  z-index: 0;
}

/* Tooltip */
.cds--tooltip--definition .cds--tooltip__trigger {
  border-bottom: none;
}

/* Tooltips presently have a higher stacking context than modals, which leads to tooltip buttons rendering above modal content */
.cds--body--with-modal-open .cds--tooltip {
  z-index: 0;
}

/* Content Switcher */
.cds--content-switcher-btn {
  background-color: $ui-02;
  border: none;
  border-top: 1px solid colors.$blue-30;
  border-bottom: 1px solid colors.$blue-30;

  &::after {
    background-color: transparent;
  }

  &:first-child {
    border-bottom-left-radius: 0.25rem;
    border-left: 0.0625rem solid colors.$blue-30;
    border-top-left-radius: 0.25rem;
  }

  &:last-child {
    border-bottom-right-radius: 0.25rem;
    border-right: 0.0625rem solid colors.$blue-30;
    border-top-right-radius: 0.25rem;
  }

  &::before {
    background-color: colors.$blue-30;
    height: 100%;
    z-index: 0;
  }

  &.cds--content-switcher--selected {
    border: 1px solid colors.$blue-60;
    background-color: colors.$blue-10;
    color: colors.$blue-60;

    &::after {
      background-color: colors.$blue-10;
    }
  }
}

/* Tabs */
.cds--tabs--scrollable
  .cds--tabs--scrollable__nav-item--selected
  .cds--tabs--scrollable__nav-link,
.cds--tabs--scrollable
  .cds--tabs--scrollable__nav-item--selected
  .cds--tabs--scrollable__nav-link:active,
.cds--tabs--scrollable
  .cds--tabs--scrollable__nav-item--selected
  .cds--tabs--scrollable__nav-link:focus {
  border-bottom: 2px solid var(--brand-03);
}

.cds--tabs--scrollable.cds--tabs--scrollable--container
  .cds--tabs--scrollable__nav-item--selected
  .cds--tabs--scrollable__nav-link {
  box-shadow: inset 0 2px 0 0 var(--brand-03);
}

.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:active,
.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:focus {
  outline: 2px solid var(--brand-03);
}

/* DataTables */
.cds--data-table,
.cds--data-table-header,
.cds--table-toolbar,
.cds--data-table tbody {
  background: transparent;
}

.cds--data-table-container {
  background: $ui-02;
  position: relative;
}

.cds--table-toolbar {
  position: absolute;
  top: 2px;
}

.cds--data-table-header {
  padding: spacing.$spacing-04;
  text-align: start;
}

.cds--data-table-header__title {
  font-size: spacing.$spacing-05;
  font-weight: 600;
  color: $text-02;
}

.cds--data-table thead,
.cds--data-table tr,
.cds--data-table td,
.cds--data-table--sort th,
.cds--data-table--sort th .cds--table-sort__flex {
  min-height: unset;
  color: $text-02;
}

/* Alternate background and border colors for zebra styled table rows */

// Datatables without expansion
.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
  background-color: $ui-02;
  border-bottom: 1px solid $ui-03;
}

.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(2n) td {
  background-color: $ui-01;
  border-bottom: 1px solid $ui-03;
  border-top: 1px solid $ui-03;
}

// Datatables with expansion
.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td {
  background-color: $ui-02;
  border-bottom: 1px solid $ui-03;
  border-top: 1px solid $ui-03;
}

.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td {
  background-color: $ui-01;
  border-bottom: 1px solid $ui-03;
}

/* Misc */
.cds--btn--primary,
.cds--btn--primary:active,
.cds--btn--tertiary:hover,
.cds--btn--tertiary:active,
.cds--btn--tertiary:focus {
  @include brand-03(background-color);
}

.cds--btn--primary:hover {
  @include brand-02(background-color);
}

.cds--btn--tertiary {
  @include brand-03(color);
}

.cds--btn--tertiary,
.cds--btn--primary:focus,
.cds--btn--tertiary:focus {
  @include brand-03(border-color);
}

.cds--btn--tertiary:hover,
.cds--btn--tertiary:active,
.cds--btn--tertiary:focus {
  color: $ui-02;
}

.cds--overflow-menu--flip {
  &.cds--overflow-menu-options {
    background-color: $openmrs-background-grey;
    left: -6.025rem;
    min-width: 12.5rem;
    top: spacing.$spacing-09;
  }
}

.cds--overflow-menu--flip {
  &.cds--overflow-menu-options[data-floating-menu-direction="bottom"] {
    &::after {
      top: 0;
      height: 0;
      width: 0;
      left: 0;
    }
  }
}

.cds--pagination-nav__page:not(.cds--pagination-nav__page--direction) {
  &::after {
    @include brand-03(background-color);
  }
}

.cds--pagination-nav__page .cds--pagination-nav__page--active,
.cds--pagination-nav__page:focus {
  outline: 2px solid var(--brand-03);
}

.cds--data-table--xs .cds--overflow-menu {
  height: spacing.$spacing-07;
}

.cds--data-table--sm .cds--overflow-menu {
  height: spacing.$spacing-08;
}

.cds--data-table--sm .cds--overflow-menu--sm {
  height: spacing.$spacing-07;
}

.cds--data-table--xs .cds--overflow-menu {
  max-height: spacing.$spacing-07;
}

.cds--data-table-container {
  padding-top: 0;
}

.cds--data-table td.cds--table-column-menu {
  width: spacing.$spacing-08;
  vertical-align: top;
  padding-right: 0;
}

.cds--data-table--lg td.cds--table-column-menu {
  width: spacing.$spacing-09;
}

/* Search inputs */
.cds--search-input:focus {
  outline: 2px solid colors.$orange-40;
}

.cds--search-input:focus ~ .cds--search-close:hover {
  outline: none;
}

/* Radio buttons */
.cds--radio-button-group--vertical
  .cds--radio-button-wrapper:not(:last-of-type) {
  margin-bottom: 0;
}

html[dir="rtl"] {
  .cds--header {
    & > a:first-child {
      & > div {
        margin-left: 0;
        margin-right: spacing.$spacing-05;
      }
    }
  }

  .cds--header-panel--expanded {
    right: calc(100vw - var(--omrs-sidenav-width));
  }

  .cds--btn--tertiary {
    padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 63px;
    svg {
      left: spacing.$spacing-05;
      right: unset;
      transform: scale(-1, 1);
    }
  }

  .cds--btn--secondary {
    padding: calc(0.375rem - 3px) 12px calc(0.375rem - 3px) 60px;
    svg {
      left: spacing.$spacing-05;
      right: unset;
      transform: scale(-1, 1);
    }
  }

  .cds--btn--ghost {
    svg {
      margin-right: spacing.$spacing-03;
      margin-left: unset;
      transform: scale(-1, 1);
    }
  }

  .cds--btn--ghost.cds--btn--icon-only {
    svg {
      margin: unset;
    }
  }

  .cds--btn--primary {
    padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 63px;
    svg {
      left: spacing.$spacing-05;
      right: unset;
      transform: scale(-1, 1);
    }
  }

  .cds--btn--primary.cds--btn--icon-only {
    padding: unset;
  }

  .cds--accordion__heading {
    & > svg {
      margin: 2px 0 0 1rem;
    }
    p {
      text-align: right;
    }
  }

  .cds--select__page-number {
    .cds--select-input {
      padding: 0 spacing.$spacing-05 0 2.25rem;
    }
  }

  .cds--content-switcher {
    & > :last-child {
      border-bottom-left-radius: 0.25rem;
      border-top-left-radius: 0.25rem;
      border-bottom-right-radius: unset;
      border-top-right-radius: unset;
      border-left: 0.0625rem solid #a6c8ff;
    }
    & > :first-child {
      border-right: 0.0625rem solid #a6c8ff;
      border-bottom-right-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      border-bottom-left-radius: unset;
      border-top-left-radius: unset;
    }
  }

  .cds--date-picker-input__wrapper {
    svg {
      left: spacing.$spacing-05;
      right: unset;
    }
  }

  .cds--list-box__field {
    padding: 0 spacing.$spacing-05 0 spacing.$spacing-09;
    .cds--list-box__menu-icon {
      left: spacing.$spacing-05;
      right: unset;
      transform: scale(-1, 1);
    }
  }

  .cds--select-input__wrapper {
    select {
      padding: 0 spacing.$spacing-05 0 spacing.$spacing-09;
    }
    svg {
      right: unset;
      left: spacing.$spacing-05;
    }
  }

  .cds--search-magnifier {
    svg {
      left: unset;
      right: spacing.$spacing-05;
    }
  }

  .cds--search-close {
    right: unset;
    left: 0;
  }

  .cds--search--sm {
    .cds--search-magnifier {
      svg {
        left: unset;
        right: spacing.$spacing-03;
      }
    }
  }

  .cds--tile {
    & > div:first-child {
      h4 {
        text-align: right;
      }
    }
  }

  .active-left-nav-link {
    border-right: 0.25rem solid var(--brand-01);
    border-left: unset !important;
  }

  .omrs-breakpoint-gt-tablet {
    main {
      & > section {
        margin-left: unset;
        margin-right: var(--omrs-sidenav-width);
        nav {
          left: calc(100vw - var(--omrs-sidenav-width));
          border-left: 1px solid #e0e0e0;
          border-right: unset;
        }
      }
    }
  }

  .omrs-breakpoint-lt-desktop {
    .cds--side-nav {
      left: unset !important;
    }
  }

  .form-container {
    .tab-container {
      .tab {
        & > button {
          text-align: right;
        }
        .active {
          border-left: unset !important;
          border-right: 0.5rem solid #009d9a;
        }
        .enabled {
          border-left: unset !important;
          border-right: 0.5rem solid #9ef0f0;
        }
      }
    }
    .tab-content {
      margin-left: unset;
      margin-right: 10rem;

      .pane {
        padding-left: unset;
        padding-right: 1rem;
      }
    }
  }
}