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

@mixin expansion-indicator {
  .mat-expansion-indicator {
    margin-top: -6px; // align vertically with text
    transform-origin: center 15px; // modify origin to match visual center

    &::after {
      border-color: var(--watt-color-primary);
    }
  }
}

watt-expandable-card {
  display: block;

  & + & {
    margin-top: var(--watt-space-m);
  }
}

.watt-expandable-card.mat-expansion-panel {
  border-radius: 4px !important;

  .mat-expansion-panel-header {
    @include watt.typography-watt-headline-4;

    height: var(--watt-space-xl);
    padding: 0 var(--watt-space-m);

    &:hover:not([aria-disabled="true"]) {
      background: var(--watt-color-neutral-white);
    }

    &.mat-expansion-toggle-indicator-before {
      @include expansion-indicator;

      .mat-expansion-panel-header-title {
        margin-right: 0;
      }
    }
  }

  @include expansion-indicator;

  .mat-expansion-panel-body {
    border-top: 1px solid var(--watt-color-neutral-grey-300);
    padding: 0 var(--watt-space-m);
  }

  .mat-expansion-panel-header-title > watt-badge {
    margin-right: var(--watt-space-m);
  }

  &.watt-solid {
    border: 1px solid var(--watt-color-neutral-grey-300);
    box-shadow: none;
  }

  // Nested cards
  &.watt-expandable-card__parent &.watt-solid {
    border: none;
  }

  &.watt-expandable-card__parent {
    > .mat-expansion-panel-content {
      > .mat-expansion-panel-body {
        border-top: none;
      }
    }
  }
}
