@use '@carbon/colors';
@use '@carbon/layout';
@use '@carbon/type';
@use '../../vars' as *;

$actionPanelOffset: layout.$spacing-09;
$narrowWorkspaceWidth: 26.25rem;
$widerWorkspaceWidth: 32.25rem;
$extraWideWorkspaceWidth: 48.25rem;

.loader {
  display: flex;
  background-color: $openmrs-background-grey;
  justify-content: center;
  min-height: layout.$spacing-09;
}

.hiddenExtraWorkspace {
  display: none;
}

.workspaceInnerContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Desktop */
:global(.omrs-breakpoint-gt-tablet) {
  .workspaceContainerWithActionMenu {
    height: 100%;

    .workspaceFixedContainer {
      right: $actionPanelOffset;
    }
  }

  .workspaceContainerWithoutActionMenu {
    height: 100%;

    .workspaceFixedContainer {
      right: 0;
    }
  }

  .header {
    position: relative;
    box-sizing: content-box;
    border-bottom: 1px solid $text-03;
    background-color: $ui-03;
    height: var(--workspace-header-height);

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

      &:hover {
        color: inherit;
      }
    }

    &:not(.maximizedWindow) {
      right: auto;
      left: auto;
    }
  }

  .headerButtons {
    button {
      background-color: $ui-02;
      border-right: 1px solid colors.$gray-20;

      > svg {
        fill: colors.$cool-gray-100 !important;
      }

      &:hover {
        background-color: $ui-01;
      }
    }
  }

  .maximizedWindow {
    width: calc(100% - $actionPanelOffset) !important;
  }

  .workspaceWindowSpacer {
    height: 100%;
    transition: margin-right 0.5s ease-in-out;
  }

  .workspaceOverlayOuterContainer {
    position: fixed;
    z-index: 50;
  }

  .workspaceFixedContainer {
    position: fixed;
    top: var(--omrs-navbar-height);
    bottom: 0;
    border-left: 1px solid $text-03;
    z-index: 50;
    background-color: white;
    transition:
      width 0.5s ease-in-out,
      right 0.5s ease-in-out;
  }

  .extraWideWorkspace {
    width: $extraWideWorkspaceWidth;

    .workspaceFixedContainer {
      width: $extraWideWorkspaceWidth;
    }

    &.hiddenRelative {
      margin-right: -$extraWideWorkspaceWidth !important;
    }

    .hiddenFixed {
      right: -$extraWideWorkspaceWidth !important;
    }
  }

  .widerWorkspace {
    width: $widerWorkspaceWidth;

    .workspaceFixedContainer {
      width: $widerWorkspaceWidth;
    }

    &.hiddenRelative {
      margin-right: -$widerWorkspaceWidth !important;
    }

    .hiddenFixed {
      right: -$widerWorkspaceWidth !important;
    }
  }

  .narrowWorkspace {
    width: $narrowWorkspaceWidth;

    .workspaceFixedContainer {
      width: $narrowWorkspaceWidth;
    }

    &.hiddenRelative {
      margin-right: -$narrowWorkspaceWidth !important;
    }

    .hiddenFixed {
      right: -$narrowWorkspaceWidth !important;
    }
  }

  .workspaceContent {
    background-color: $ui-02;
    overflow-y: auto;
    flex-grow: 1;
  }

  .marginWorkspaceContent {
    margin-right: $actionPanelOffset;
  }

  // The parcel makes a div, between the workspace container and the workspace itself
  .workspaceContent > div {
    height: 100%;
  }

  .overlay {
    background-color: $ui-02;
    display: flex;
    flex-direction: column;
    z-index: 1000;
  }

  .overlayHeaderSpacer {
    flex-grow: 1;
  }
}

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
  .header {
    position: relative;
    background-color: var(--brand-02);

    a {
      color: $ui-02;
    }

    button {
      color: $ui-02;
      background-color: var(--brand-02);

      &:hover {
        background-color: var(--brand-03);
      }
    }
  }

  .hiddenFixed {
    top: 100% !important;
  }

  .workspaceFixedContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8002;
    transition: top 0.5s ease-in-out;
  }

  .workspaceContainerWithActionMenu {
    .workspaceFixedContainer {
      bottom: var(--bottom-nav-height);
    }
  }

  .overlay {
    background-color: $ui-02;
    display: flex;
    flex-direction: column;
  }

  .overlayCloseButton {
    order: 1;
  }

  .overlayTitle {
    order: 2;
  }

  .workspaceContent {
    background-color: $ui-01;
    overflow-y: auto;
    height: 100%;
  }

  // The parcel makes a div, between the workspace container and the workspace itself
  .workspaceContent > div {
    height: 100%;
  }

  .dynamicWidth {
    width: 100%;
  }

  .marginWorkspaceContent {
    margin-bottom: var(--bottom-nav-height);
  }
}

// Overriding styles for RTL support
html[dir='rtl'] {
  :global(.omrs-breakpoint-gt-tablet) {
    .workspaceContainerWithActionMenu {
      .workspaceFixedContainer {
        right: unset;
        left: $actionPanelOffset;
      }
    }

    .workspaceContainerWithoutActionMenu {
      height: 100%;

      .workspaceFixedContainer {
        right: unset;
        left: 0;
      }
    }
  }
}