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

.link-list {
  list-style: none;
  padding: 0;
  width: inherit;
  margin: 0;
  position: relative;

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

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

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

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

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

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

    &--outline {
      --border-color: var(--component-listelements-border-neutral-light);

      border-top: spacers.getSpacer(2xs) var(--border-color) solid;
      border-left: spacers.getSpacer(2xs) var(--border-color) solid;
      border-right: spacers.getSpacer(2xs) var(--border-color) solid;

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

      &--white {
        --border-color: var(--component-listelements-border-neutral-light);
      }

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

      &--cherry {
        --border-color: var(--component-listelements-border-cherry-light);
      }

      &--neutral {
        --border-color: var(--component-listelements-border-neutral-light);
      }
    }
  }

  &__anchor {
    display: flex;
    min-height: 4rem;
    text-decoration: none;
    color: var(--color-base-text-onlight);

    // listeelement settes til div om man er i edit mode, og skal da ikke ha interactive effekter
    &:not(div) {
      cursor: pointer;
    }

    &--button {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      box-sizing: border-box;
      padding: 0;
    }

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

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

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

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

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

    &--fill,
    &--fill-negative {
      // listeelement settes til div om man er i edit mode, og styles da via ListEditMode
      &:not(div) {
        margin-top: spacers.getSpacer(2xs);
      }

      li:first-child > &:not(div) {
        margin-top: 0;
      }

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

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

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

      // Skal ikke brukes, men klassen er definert for enkelhets skyld
      &--white {
        border: 1px solid var(--component-listelements-border-neutral-normal);
      }
    }

    &--small {
      font-size: font-settings.$font-size-xs;
      line-height: font-settings.$lineheight-size-xs;
    }

    &--medium {
      font-size: font-settings.$font-size-sm;
      line-height: font-settings.$lineheight-size-sm;
    }

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

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

      &--medium {
        font-size: font-settings.$font-size-md;
        line-height: font-settings.$lineheight-size-md;
      }

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

    &--white:not(.link-list__anchor--outline) {
      // listeelement 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);
      }
    }

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

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

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

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

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

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

    &:focus-visible {
      outline: 4px solid var(--color-action-border-onlight-focus);
      outline-offset: 0; // Override user agent default
      position: relative;
      z-index: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

    &--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;
      }
    }
  }

  &__image-container {
    display: flex;
    align-items: center;
    height: 100%;

    img {
      display: block;
      padding: var(--core-space-4xs);
      max-width: 38px;
      max-height: 38px;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding: var(--core-space-3xs);
        max-width: 48px;
        max-height: 48px;
      }
    }
  }

  &__status-marker {
    width: 6px;
    margin-right: 2px;
    height: auto;
    background-color: transparent;

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