// 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;

:root {
  --watt-modal-width: 100vw;
  --watt-modal-min-height: auto;
  --watt-modal-height: calc(100vh - var(--watt-topbar-height, 0px));
  --watt-modal-content-padding: 0 var(--watt-space-ml);
}

.watt-modal {
  width: var(--watt-modal-width);
  max-width: 100vw;
  height: var(--watt-modal-height);
  min-height: var(--watt-modal-min-height);
  max-height: 100vh;

  position: relative;
  display: grid;
  padding: 0;
  align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "title close"
    "content content"
    "actions actions";

  &--small {
    --watt-modal-width: 320px;
    --watt-modal-height: auto;

    @include watt.media(">Small") {
      --watt-modal-width: 520px;
    }

    & .watt-modal-title {
      @include watt.typography-watt-headline-3;
    }
  }

  &--medium {
    @include watt.media(">720px") {
      --watt-modal-width: 720px;
      --watt-modal-height: auto;
    }
  }

  &--large {
    @include watt.media(">786px") {
      --watt-modal-width: 786px;
      --watt-modal-height: auto;
    }

    @include watt.media(">Medium") {
      --watt-modal-width: 936px;
      --watt-modal-height: auto;
    }
  }
}

.watt-modal-panel {
  margin-top: var(--watt-topbar-height);

  .mat-mdc-dialog-container .mdc-dialog__surface {
    width: auto;
  }

  .watt-modal-close {
    grid-area: close;
    align-self: start;
    margin: var(--watt-space-s);
    color: var(--watt-color-primary);
  }

  .watt-modal-title {
    grid-area: title;
    margin: var(--watt-space-s) var(--watt-space-ml);
    color: var(--watt-typography-text-color);

    &.watt-modal-title-icon {
      display: flex;
      align-items: center;
      gap: var(--watt-space-s);
    }
  }

  .watt-modal-content {
    align-self: stretch;
    grid-area: content;
    overflow: auto;
    padding: var(--watt-modal-content-padding);

    .watt-modal-content--full-width {
      display: block;

      margin: 0 calc(-1 * var(--watt-space-s)) 0 0;

      @include watt.media(">720px") {
        margin: 0 calc(-1 * var(--watt-space-ml));
      }
    }
  }

  .watt-modal-scrollable {
    border: 1px solid var(--watt-color-neutral-grey-300);
    border-left: none;
    border-right: none;
  }

  watt-modal-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    padding: var(--watt-space-ml);
    gap: var(--watt-space-m);
  }

  .watt-modal__spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

      p {
        margin-top: var(--watt-space-m);
        width: 100%;
      }
    }
  }
}
