@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.expander-list {
  --statusmarker-left-space: 8px;

  list-style: none;
  padding: 0;
  width: inherit;
  margin: 0;

  &--outline {
    &--neutral,
    &--white {
      border: 1px solid var(--component-listelements-border-neutral-light);
    }

    &--blueberry {
      border: 1px solid var(--component-listelements-border-blueberry-light);
    }

    &--cherry {
      border: 1px solidvar(--component-listelements-border-cherry-light);
    }
  }

  &--fill {
    display: flex;
    flex-flow: column;
    gap: spacers.getSpacer(2xs);
  }

  &__item {
    border: 0;
    display: grid;
    grid-template:
      'header' auto
      'content' auto / 1fr auto;
    width: 100%;

    &--new {
      grid-template:
        'statusmarker header' auto
        'statusmarker content' auto / 6px auto;

      --statusmarker-left-space: 2px;
    }

    &--line {
      border-bottom: 1px solid var(--component-listelements-border-neutral-normal);

      &:first-of-type {
        border-top: 1px solid var(--component-listelements-border-neutral-normal);
      }

      &--blueberry,
      .expander-list-link--line--blueberry {
        background-color: var(--component-listelements-background-blueberry-light);
      }

      &--cherry,
      .expander-list-link--line--cherry {
        background-color: var(--component-listelements-background-cherry-light);
      }

      &--neutral,
      .expander-list-link--line--neutral {
        background-color: var(--component-listelements-background-neutral-light);
      }

      &--white,
      .expander-list-link--line--white {
        background-color: var(--color-base-background-white);
      }
    }

    &--outline {
      background-color: var(--color-base-background-white);

      &--white,
      &--neutral {
        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;

        &:last-of-type {
          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-neutral-light) solid;
        }
      }

      &--blueberry {
        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;

        &:last-of-type {
          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-blueberry-light) solid;
        }
      }

      &--cherry {
        border-top: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
        border-left: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
        border-right: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;

        &:last-of-type {
          border-bottom: spacers.getSpacer(2xs) var(--component-listelements-border-cherry-light) solid;
        }
      }
    }

    &--fill {
      &--blueberry,
      .expander-list-link--fill--blueberry {
        background-color: var(--component-listelements-background-blueberry-light);
      }

      &--cherry,
      .expander-list-link--fill--cherry {
        background-color: var(--component-listelements-background-cherry-light);
      }

      &--neutral,
      .expander-list-link--fill--neutral {
        background-color: var(--component-listelements-background-neutral-light);
      }

      &--white,
      .expander-list-link--fill--white {
        background-color: var(--color-base-background-white);
      }
    }

    &--fill-negative {
      background-color: var(--color-base-background-white);
    }

    &--fill,
    &--fill-negative {
      &--blueberry {
        border: 1px solid var(--component-listelements-border-blueberry-normal);
      }

      &--cherry {
        border: 1px solid var(--component-listelements-border-cherry-normal);
      }

      &--neutral,
      &--white {
        border: 1px solid var(--component-listelements-border-neutral-normal);
      }
    }

    &__status-marker {
      width: 6px;
      height: 100%;
      grid-area: statusmarker;
      background-color: transparent;

      &--new {
        background-color: var(--color-notification-status-info);
      }
    }
  }
}

.expander-list-link {
  padding: 0;
  position: relative;
  font-size: font-settings.$font-size-sm;
  line-height: font-settings.$lineheight-size-sm;
  display: flex;
  font-family: inherit;
  text-decoration: none;
  justify-content: space-between;
  align-items: center;
  letter-spacing: unset;
  color: var(--color-base-text-onlight);
  border: 0;
  width: 100%;
  outline: none;
  grid-area: header;
  padding-left: var(--statusmarker-left-space);

  &:not(div) {
    cursor: pointer;
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    font-size: font-settings.$font-size-md;
    line-height: font-settings.$lineheight-size-md;
  }

  &[aria-expanded='true'] {
    border-bottom: 1px solid var(--color-action-border-ondark);
  }

  &--open {
    font-weight: 600;
  }

  &--fill-negative {
    background-color: var(--color-base-background-white);
  }

  &:focus-visible {
    outline: 0.25rem solid var(--color-action-border-onlight-focus);
  }

  &--white:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
    &[aria-expanded='false'] {
      // expander settes til div om man er i edit mode, og skal da ikke ha hover/active effekter
      &:hover:not(div) {
        background-color: var(--component-listelements-background-neutral-light);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-neutral-medium);
      }
    }

    &[aria-expanded='true'] {
      background-color: var(--component-listelements-background-neutral-light);

      &:hover:not(div) {
        background-color: var(--component-listelements-background-neutral-medium);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-neutral-dark);
      }
    }
  }

  &--blueberry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
    &[aria-expanded='false'] {
      &:hover:not(div) {
        background-color: var(--component-listelements-background-blueberry-medium);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-blueberry-dark);
      }
    }

    &[aria-expanded='true'] {
      background-color: var(--component-listelements-background-blueberry-medium);

      &:hover:not(div) {
        background-color: var(--component-listelements-background-blueberry-dark);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-blueberry-verydark);
      }
    }
  }

  &--cherry:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
    &[aria-expanded='false'] {
      &:hover:not(div) {
        background-color: var(--component-listelements-background-cherry-medium);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-cherry-dark);
      }
    }

    &[aria-expanded='true'] {
      background-color: var(--component-listelements-background-cherry-medium);

      &:hover:not(div) {
        background-color: var(--component-listelements-background-cherry-dark);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-cherry-verydark);
      }
    }
  }

  &--neutral:not(.expander-list-link--outline, .expander-list-link--fill-negative) {
    &[aria-expanded='false'] {
      &:hover:not(div) {
        background-color: var(--component-listelements-background-neutral-medium);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-neutral-dark);
      }
    }

    &[aria-expanded='true'] {
      background-color: var(--component-listelements-background-neutral-medium);

      &:hover:not(div) {
        background-color: var(--component-listelements-background-neutral-dark);
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-neutral-verydark);
      }
    }
  }

  &--outline {
    &--blueberry {
      &[aria-expanded='false'] {
        border-bottom: 1px solid var(--component-listelements-border-blueberry-normal);
      }
    }

    &--cherry {
      &[aria-expanded='false'] {
        border-bottom: 1px solid var(--component-listelements-border-cherry-normal);
      }
    }

    &--neutral {
      &[aria-expanded='false'] {
        border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
      }
    }

    &--white {
      &[aria-expanded='false'] {
        border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
      }
    }
  }

  &--outline,
  &--fill-negative {
    background-color: var(--color-base-background-white);

    &--blueberry {
      &[aria-expanded='false'] {
        &:hover:not(div) {
          background-color: var(--component-listelements-background-blueberry-light);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-blueberry-medium);
        }
      }

      &[aria-expanded='true'] {
        background-color: var(--component-listelements-background-blueberry-light);

        &:hover:not(div) {
          background-color: var(--component-listelements-background-blueberry-medium);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-blueberry-dark);
        }
      }
    }

    &--cherry {
      &[aria-expanded='false'] {
        &:hover:not(div) {
          background-color: var(--component-listelements-background-cherry-light);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-cherry-medium);
        }
      }

      &[aria-expanded='true'] {
        background-color: var(--component-listelements-background-cherry-light);

        &:hover:not(div) {
          background-color: var(--component-listelements-background-cherry-medium);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-cherry-dark);
        }
      }
    }

    &--neutral,
    &--white {
      &[aria-expanded='false'] {
        &:hover:not(div) {
          background-color: var(--component-listelements-background-neutral-light);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-neutral-medium);
        }
      }

      &[aria-expanded='true'] {
        background-color: var(--component-listelements-background-neutral-light);

        &:hover:not(div) {
          background-color: var(--component-listelements-background-neutral-medium);
        }

        &:active:not(div) {
          background-color: var(--component-listelements-background-neutral-dark);
        }
      }
    }
  }

  &--large {
    font-size: font-settings.$font-size-lg;
    line-height: font-settings.$lineheight-size-lg;
  }

  &--new {
    background-color: var(--component-listelements-background-blueberry-light) !important;

    &:hover:not(div) {
      background-color: var(--component-listelements-background-blueberry-medium) !important;
    }

    &:active:not(div) {
      background-color: var(--component-listelements-background-blueberry-dark) !important;
    }

    &[aria-expanded='true'] {
      background-color: var(--component-listelements-background-blueberry-medium) !important;

      &:hover:not(div) {
        background-color: var(--component-listelements-background-blueberry-dark) !important;
      }

      &:active:not(div) {
        background-color: var(--component-listelements-background-blueberry-verydark) !important;
      }
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    margin-right: spacers.getSpacer(2xs);
  }

  &__chevron {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: spacers.getSpacer(2xs);
  }

  &__main-content {
    padding: 0;
    display: none;
    grid-area: content;
    padding-left: var(--statusmarker-left-space);

    @media print {
      display: block;
    }

    &--expanded {
      display: block;
    }

    &--new {
      background-color: var(--component-listelements-background-blueberry-light);
    }

    &--padding {
      padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(l) calc(spacers.getSpacer(s) + var(--statusmarker-left-space));
    }

    &--outline {
      &--blueberry {
        &[aria-expanded='true'] {
          border-bottom: 1px solid var(--component-listelements-border-blueberry-normal);
        }
      }

      &--cherry {
        &[aria-expanded='true'] {
          border-bottom: 1px solid var(--component-listelements-border-cherry-normal);
        }
      }

      &--neutral,
      &--white {
        &[aria-expanded='true'] {
          border-bottom: 1px solid var(--component-listelements-border-neutral-normal);
        }
      }
    }
  }
}