// 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.
@layer vater {
  vater-flex > *,
  [vater-flex] > * {
    flex: 1 1 0;
  }

  vater-stack,
  [vater-stack] {
    align-items: center;

    &.vater-row > * {
      min-width: max-content;
    }

    &.vater-column > * {
      min-height: max-content;
    }
  }

  .vater-column {
    flex-direction: column;

    & > .vater-fill-both,
    & > .vater-fill-vertical {
      flex-basis: 100%;
    }
  }

  .vater-row {
    flex-direction: row;

    & > .vater-fill-both,
    & > .vater-fill-horizontal {
      flex-basis: 100%;
    }
  }

  .vater-fill-horizontal {
    width: 100%;
  }

  .vater-fill-vertical {
    height: 100%;
  }

  .vater-fill-both {
    width: 100%;
    height: 100%;
  }

  :not(vater-stack, [vater-stack], vater-flex, [vater-flex]) {
    &.vater-fill-vertical,
    &.vater-fill-horizontal,
    &.vater-fill-both {
      display: block;
    }
  }

  .vater-scrollable {
    &.vater-column {
      overflow-x: hidden;
      overflow-y: auto;
      min-width: min-content;
    }

    &.vater-row {
      overflow-x: auto;
      overflow-y: hidden;
      min-height: min-content;
    }

    &:not(.vater-column, .vater-row) {
      overflow: auto;
    }
  }

  .vater-center {
    margin: auto;
  }

  .vater-wrap {
    flex-wrap: wrap;
  }

  .vater-inset-0 {
    position: absolute;
    inset: 0;
  }

  .vater-inset-xs {
    position: absolute;
    inset: var(--watt-space-xs);
  }

  .vater-inset-s {
    position: absolute;
    inset: var(--watt-space-s);
  }

  .vater-inset-m {
    position: absolute;
    inset: var(--watt-space-m);
  }

  .vater-inset-ml {
    position: absolute;
    inset: var(--watt-space-ml);
  }

  .vater-inset-l {
    position: absolute;
    inset: var(--watt-space-l);
  }

  .vater-inset-xl {
    position: absolute;
    inset: var(--watt-space-xl);
  }

  .vater-offset-xs {
    &.vater-column {
      padding: var(--watt-space-xs) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-xs);
    }
  }

  .vater-offset-s {
    &.vater-column {
      padding: var(--watt-space-s) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-s);
    }
  }

  .vater-offset-m {
    &.vater-column {
      padding: var(--watt-space-m) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-m);
    }
  }

  .vater-offset-ml {
    &.vater-column {
      padding: var(--watt-space-ml) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-ml);
    }
  }

  .vater-offset-l {
    &.vater-column {
      padding: var(--watt-space-l) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-l);
    }
  }

  .vater-offset-xl {
    &.vater-column {
      padding: var(--watt-space-xl) 0;
    }

    &.vater-row {
      padding: 0 var(--watt-space-xl);
    }
  }

  .vater-gap-xs {
    gap: var(--watt-space-xs);
  }

  .vater-gap-s {
    gap: var(--watt-space-s);
  }

  .vater-gap-m {
    gap: var(--watt-space-m);
  }

  .vater-gap-ml {
    gap: var(--watt-space-ml);
  }

  .vater-gap-l {
    gap: var(--watt-space-l);
  }

  .vater-gap-xl {
    gap: var(--watt-space-xl);
  }

  .vater-flex-auto > * {
    flex: auto;
  }

  .vater-align-stretch {
    align-items: stretch;
  }

  .vater-align-start {
    align-items: flex-start;
  }

  .vater-align-end {
    align-items: flex-end;
  }

  .vater-align-center {
    align-items: center;
  }

  .vater-align-baseline {
    align-items: baseline;
  }

  .vater-justify-start {
    justify-content: flex-start;
  }

  .vater-justify-end {
    justify-content: flex-end;
  }

  .vater-justify-center {
    justify-content: center;
  }

  .vater-justify-space-between {
    justify-content: space-between;
  }

  .vater-justify-space-around {
    justify-content: space-around;
  }

  .vater-justify-space-evenly {
    justify-content: space-evenly;
  }
}
