// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@use "@energinet-datahub/watt/utils" as watt;

:host {
  display: block;
}

.watt-sidenav-container {
  height: 100vh;
}

.watt-sidenav-close-button {
  position: absolute;
  top: 10px;
  right: 0px;
}

.mat-drawer {
  overflow-y: visible;
}

.watt-sidenav {
  width: 245px;
  background-color: var(--watt-sidenav-background-color);

  @include watt.media("<Large") {
    width: calc(245px + 44px); // Added closing button width
  }

  &.mat-drawer-over {
    &.mat-drawer-opened {
      .watt-sidenav-close-button {
        opacity: 1;
      }
    }

    .watt-sidenav-close-button {
      opacity: 0;
      transition: opacity 50ms linear;

      ::ng-deep .mat-mdc-button.mat-icon {
        color: var(--watt-color-neutral-white);
      }
    }
  }
}

.watt-sidenav-content {
  display: grid;
  grid-template-rows: auto minmax(30rem, 1fr);
}

.watt-main-content {
  position: relative;
  height: 100%;
}

.watt-toolbar {
  position: sticky;
  top: 0;
  background-color: var(--watt-color-neutral-white);
  border-bottom: 1px solid var(--watt-color-neutral-grey-300);
  height: var(--watt-space-xl);
  z-index: 2;
}

.watt-main-content,
.watt-toolbar {
  width: 100vw;

  @include watt.media(">=Large") {
    width: calc(100vw - 245px);
  }
}
