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

.watt-stepper {
  .mat-horizontal-stepper-header-container {
    padding-bottom: var(--watt-space-ml);
  }

  .mat-step-label.mat-step-label-selected {
    color: var(--watt-color-primary);
  }

  .mat-form-field-suffix {
    padding-right: var(--watt-space-s);
    color: var(--watt-color-neutral-grey-600);
  }

  .mat-step-label {
    @include watt.typography-watt-step-label;
  }

  .mat-step-header .mat-step-icon-selected {
    border: solid 1px var(--watt-color-primary);
    background-color: var(--watt-color-neutral-white);
    color: var(--watt-color-primary);
  }

  .mat-stepper-horizontal-line {
    margin: 0 5px;
  }

  .watt-stepper-button-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: var(--watt-space-m);
    width: 100%;
    padding-top: var(--watt-space-ml);
  }

  .mat-step-icon-state-error {
    color: var(--watt-color-state-danger);
    border: solid 1px var(--watt-color-state-danger);
  }
}

@include watt.media("<720px") {
  .watt-stepper {
    .mat-horizontal-stepper-header {
      padding: 0;
    }

    .mat-step-label:not(.mat-step-label-selected) {
      display: none;
    }

    .mat-horizontal-content-container {
      padding: 0 0 24px 0;
    }
  }
}

.watt-modal--medium,
.watt-modal--large {
  watt-stepper,
  .watt-stepper {
    height: 100%;
  }

  .mat-horizontal-stepper-content {
    display: grid;
    align-items: center;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "content"
      "actions";

    .watt-stepper-content-wrapper {
      align-self: stretch;
      grid-area: content;
      overflow: auto;
    }

    .watt-stepper-button-wrapper {
      grid-area: actions;
    }
  }
}
