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

// TO DO Move this styles to style - guide
// https://github.com/openmrs/openmrs-esm-core/blob/master/packages/framework/esm-styleguide/src/_vars.scss
$color-blue-30 : #a6c8ff;
$color-blue-10: #edf5ff;

.widgetCard {
  border: 1px solid $ui-03;
}

.productiveHeading01 {
  @include type.type-style("heading-compact-01");
}

.contentSwitcherWrapper {
  display: flex;
  width: fit-content;
  justify-content: flex-end;
  align-items: center;
  width: 60%;
}

.contentSwitcherWrapper > div > button {
  background-color: $ui-02;
}

.contentSwitcherWrapper > div button:first-child {
  border-top: 1px solid $color-blue-30;
  border-bottom: 1px solid $color-blue-30;
  border-left: 1px solid $color-blue-30;
  border-right: none;
  border-radius: spacing.$spacing-02 0 0px spacing.$spacing-02;
}

.contentSwitcherWrapper > div button:last-child {
  border-top: 1px solid $color-blue-30;
  border-bottom: 1px solid $color-blue-30;
  border-right: 1px solid $color-blue-30;
  border-left: none;
  border-radius: 0px spacing.$spacing-02 spacing.$spacing-02 0px;
}

.contentSwitcherWrapper > div > button[aria-selected=true],
.contentSwitcherWrapper > div > button[aria-selected=true]:first-child {
  background-color: $color-blue-10;
  color: $color-blue-60-2;
  border-color: $color-blue-60-2;
  border-right: 1px solid $color-blue-60-2;
}

.contentSwitcherWrapper > div > button[aria-selected=true],
.contentSwitcherWrapper > div > button[aria-selected=true]:last-child {
  background-color: $color-blue-10;
  color: $color-blue-60-2;
  border-color: $color-blue-60-2;
  border-left: 1px solid $color-blue-60-2;
}

.contentSwitcherWrapper > div > button[aria-selected=true]:focus {
  box-shadow: none;
}

.divider {
  width: 1px;
  height: spacing.$spacing-05;
  color: colors.$gray-20;
  margin: 0 spacing.$spacing-05;
}

.content {
  @include type.type-style("heading-compact-01");
  color: $text-02;
  margin-top: spacing.$spacing-05;
  margin-bottom: spacing.$spacing-03;
}

.tile {
  text-align: center;
}