@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/type';
@import '../../root.scss';

.desktopOverlay {
  position: fixed;
  top: spacing.$spacing-09;
  width: 37rem;
  right: 0;
  bottom: 0;
  border-left: 1px solid $text-03;
  background-color: $ui-01;
  overflow-y: auto;
  height: calc(100vh - 3rem);
  z-index: 99999;
}

.desktopOverlay::after {
  height: 100%;
  border-left: 1px solid $text-03;
}

.tabletOverlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: $ui-01;
  overflow: hidden;
  padding-top: spacing.$spacing-09;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow-y: auto;
  height: 100vh;
}

.tabletOverlayHeader {
  button {
    @include brand-01(background-color);
  }

  .headerContent {
    color: $ui-02;
  }
}

.desktopHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $ui-03;
  border-bottom: 1px solid $text-03;
  position: sticky;
  position: -webkit-sticky;
  width: 100%;
  z-index: 1000;
  top: 0;
}

.headerContent {
  @include type.type-style('heading-compact-02');
  padding: 0 spacing.$spacing-05;
  color: $ui-05;
}

.closeButton {
  background-color: $ui-background;
  color: $ui-05;
  fill: $ui-05;
}

/* Desktop */
:global(.omrs-breakpoint-gt-tablet) {
  .overlayContent {
    padding: 0 0 0 0;
    overflow-y: auto;
  }
}

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
  .overlayContent {
    padding: 0 0 0 0;
    overflow-y: auto;
  }
}