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

.tile {
  // Referanse for grandparent selection i underklassene lenger nede
  $tile: &;

  display: flex;
  width: inherit;
  padding: var(--core-space-2xs) var(--core-space-2xs) var(--core-space-xs);
  flex-direction: column;
  justify-content: center;
  background-color: var(--core-color-white);
  color: var(--core-color-black);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--color-action-border-onlight);
  outline: none;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    padding: var(--core-space-l) var(--core-space-m) var(--core-space-l) var(--core-space-s);
    justify-content: flex-start;
  }

  @media print {
    border: 1px solid var(--core-color-black);
  }

  &--fixed {
    min-width: 15rem;
    max-width: 20rem;
  }

  &--compact {
    padding: var(--core-space-2xs) var(--core-space-2xs) var(--core-space-xs);

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

  svg {
    flex-shrink: 0;
  }

  &:hover,
  &:active {
    background-color: var(--color-action-background-ondark-selected);
  }

  &:focus-visible {
    box-shadow: 0 0 0 3px var(--color-action-border-onlight-focus);
    border-color: var(--color-action-border-onlight-focus);
  }

  &--highlighted {
    background-color: palette.$blueberry500;
    border-color: palette.$blueberry500;
    color: palette.$white;

    &:hover,
    &:active {
      background-color: palette.$blueberry700;
      border-color: palette.$blueberry700;
    }

    &:focus-visible {
      border-color: var(--color-action-border-onlight-focus);
    }
  }

  &__title {
    word-break: normal;
    overflow-wrap: break-word;
    font-size: font-settings.$font-size-sm;
    text-align: center;
    line-height: 1.74rem;
    font-weight: 400;
    margin: var(--core-space-3xs) 0 0;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      text-align: left;
      font-weight: 600;
      font-size: font-settings.$font-size-md;
      line-height: 1.625rem;
      margin: var(--core-space-s) 0 0 var(--core-space-2xs);
    }

    &--compact {
      margin: 0 0 0 var(--core-space-3xs);
      text-align: left;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        margin-left: var(--core-space-2xs);
      }
    }
  }

  #{$tile}:focus-visible & {
    &__title {
      &--highlighted {
        text-decoration: underline;
      }
    }
  }

  &__description {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: var(--core-space-2xs) 0 0 var(--core-space-2xs);
  }

  &__children {
    margin: var(--core-space-s) 0 0 var(--core-space-2xs);
  }
}

.title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    align-items: start;

    @media print {
      flex-direction: row;
    }
  }

  &--compact {
    flex-direction: row;
    align-items: center;
    padding-right: var(--core-space-s);
    padding-bottom: 0;

    svg {
      flex-shrink: 0;
    }
  }
}