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

.service-message {
  $servicemessage: &;

  border-width: 1px;
  border-bottom-style: solid;

  &:first-of-type {
    border-top-style: solid;
  }

  &--success {
    background-color: var(--color-notification-background-success);

    &#{$servicemessage},
    &#{$servicemessage}__label-container {
      border-color: var(--color-notification-border-success);
    }
  }

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

    &#{$servicemessage},
    &#{$servicemessage}__label-container {
      border-color: var(--color-notification-border-info);
    }
  }

  &--warn {
    background-color: var(--color-notification-background-warning);

    &#{$servicemessage},
    &#{$servicemessage}__label-container {
      border-color: var(--color-notification-border-warning);
    }
  }

  &--error {
    background-color: var(--color-notification-background-error);

    &#{$servicemessage},
    &#{$servicemessage}__label-container {
      border-color: var(--color-notification-border-error);
    }
  }

  &__icon {
    fill: var(--color-action-graphics-onlight);
  }

  &__container {
    @include make-container;
    @include make-container-max-widths;
  }

  &__row {
    @include make-row;
  }

  &__col {
    @include make-col-ready;
    @include make-col(12);
  }

  &__label-container {
    position: relative;

    &--has-expander {
      cursor: pointer;
    }

    &--has-expander:has(:focus-visible) {
      box-shadow: inset 0 0 0 4px var(--color-action-border-onlight-focus);
    }

    &--info#{&}--has-expander {
      &:hover {
        background-color: var(--color-notification-background-info-hover);
      }

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

    &--success#{&}--has-expander {
      &:hover {
        background-color: var(--color-notification-background-success-hover);
      }

      &:active {
        background-color: var(--color-notification-background-success-active);
      }
    }

    &--warn#{&}--has-expander {
      &:hover {
        background-color: var(--color-notification-background-warning-hover);
      }

      &:active {
        background-color: var(--color-notification-background-warning-active);
      }
    }

    &--error#{&}--has-expander {
      &:hover {
        background-color: var(--color-notification-background-error-hover);
      }

      &:active {
        background-color: var(--color-notification-background-error-active);
      }
    }
  }

  &__label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--core-space-2xs);

    @media (min-width: map.get($grid-breakpoints, md)) {
      gap: var(--core-space-m);
    }
  }

  &__title {
    display: flex;
    width: 100%;
    font-weight: 700;
    font-size: font-settings.$font-size-xs;
    line-height: inherit;
    margin: 0;

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

  &__toggle {
    all: unset;
    width: 100%;
    box-sizing: border-box;

    // Triks for at hele labelen skal trigge klikk på knappen
    &::after {
      inset: 0;
      content: '';
      position: absolute;
    }

    &:focus-visible {
      outline: none !important;
    }
  }

  &__content {
    margin-left: 3.375rem;
    margin-right: 3.375rem;
    padding-top: var(--core-space-3xs);
    padding-bottom: var(--core-space-2xs);

    @media (min-width: map.get($grid-breakpoints, md)) {
      margin-left: 4.375rem;
      margin-right: 4.375rem;
    }

    @media (min-width: map.get($grid-breakpoints, lg)) {
      margin-left: 4rem;
      margin-right: 4rem;
    }
  }

  &__info {
    font-size: font-settings.$font-size-xs;
    line-height: 1.25rem;
    margin: 0;

    @media (min-width: map.get($grid-breakpoints, lg)) {
      line-height: 1.625rem;
      font-size: font-settings.$font-size-sm;
    }

    &--extra {
      font-size: 0.875rem;
      margin-top: var(--core-space-2xs);

      @media (min-width: map.get($grid-breakpoints, lg)) {
        margin-top: var(--core-space-xs);
        font-size: font-settings.$font-size-xs;
        line-height: font-settings.$lineheight-size-xs;
      }
    }
  }

  &__actions {
    display: flex;
    justify-content: space-between;
    flex-flow: column wrap;
    gap: var(--core-space-2xs);
    margin-top: var(--core-space-2xs);

    @media (min-width: map.get($grid-breakpoints, sm)) {
      flex-direction: row;
    }

    @media (min-width: map.get($grid-breakpoints, lg)) {
      margin-top: var(--core-space-s);
    }
  }

  &__action {
    cursor: pointer;
    display: flex;
    align-items: center;
    border: none;
    width: fit-content;
    color: var(--color-action-text-onlight);
    font-weight: 600;
    font-size: font-settings.$font-size-xs;
    line-height: 1.25rem;
    background-color: transparent;
    text-decoration: none;
    padding: var(--core-space-xs);
    margin-left: calc(var(--core-space-xs) * -1);
    gap: var(--core-space-xs);

    &:hover,
    &:active {
      background-color: rgb(88 170 187 / 10%);
    }

    &:focus-visible {
      box-shadow: 0 0 0 4px var(--color-action-border-onlight-focus);
      background-color: transparent;
      border: 0;
      outline: none;
    }

    &--close {
      @media (min-width: map.get($grid-breakpoints, lg)) {
        margin-left: auto;
      }
    }
  }

  &__close {
    z-index: 1;
  }
}