@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;

$padding-clickable-area-top-bottom: 8px;
$padding-clickable-area-left: 8px;

@mixin dashed-border() {
  box-shadow: none;
  position: relative;

  &::after {
    position: absolute;
    content: '';

    $encoded-color: string.slice(meta.inspect(palette.$neutral600), 2);

    // Variabler for å lettere styre dashen i background-imaget under
    $stroke: 4;
    $dash: 0.2;
    $gap: 7;
    $scale: 1;
    $stroke-scaled: $stroke * $scale;
    $dash-scaled: $dash * $scale;
    $gap-scaled: $gap * $scale;

    border-radius: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23#{$encoded-color}' stroke-width='#{$stroke-scaled}' stroke-dasharray='#{$dash-scaled},#{$gap-scaled}' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    inset: -2px;
  }
}

.radio-button-errors {
  font-size: font-settings.$font-size-sm;
  font-weight: 600;
  color: palette.$cherry600;
  margin-top: 0;
}

.radio-button-wrapper {
  margin-left: -$padding-clickable-area-left;

  &__large {
    margin: spacers.getSpacer(2xs) 0;

    &--focused {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
      color: palette.$neutral500;
    }

    &--focused#{&}--on-blueberry {
      color: palette.$blueberry500;
    }

    &--focused#{&}--selected {
      color: palette.$blueberry900;
    }

    &--focused#{&}--invalid {
      color: palette.$cherry400;
    }
  }
}

.radio-button-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  line-height: font-settings.$lineheight-size-sm;
  color: palette.$black;
  padding: $padding-clickable-area-top-bottom 0 $padding-clickable-area-top-bottom $padding-clickable-area-left;

  &--on-dark {
    color: palette.$white;
  }

  &--invalid {
    color: palette.$black;
  }

  &--disabled {
    cursor: default;
    color: palette.$neutral700;
  }

  &__large {
    padding: spacers.getSpacer(s);
    background-color: palette.$neutral50;
    border: 1px solid transparent;

    &:hover {
      background-color: palette.$neutral100;
    }

    &--focused {
      border: 1px solid var(--color-action-border-ondark-focus);
    }

    &--on-blueberry {
      background-color: palette.$white;

      &:focus {
        background-color: palette.$white;
      }

      &:hover {
        background-color: palette.$blueberry100;
      }
    }

    &--on-grey {
      background-color: palette.$white;

      &:hover {
        background-color: palette.$neutral100;
      }

      &:focus {
        background-color: palette.$white;
      }
    }
  }

  &__large#{&}--on-dark {
    background-color: palette.$blueberry800;
  }

  &__large#{&}--invalid {
    background-color: palette.$white;

    &:hover {
      background-color: palette.$cherry100;
    }
  }

  &__large#{&}__large--selected-invalid {
    background-color: palette.$cherry100;
    color: palette.$black;

    &:hover {
      background-color: palette.$cherry200;
    }
  }

  &__large#{&}__large--on-grey {
    background-color: palette.$white;

    &:hover {
      background-color: palette.$neutral100;
    }

    &:focus {
      background-color: palette.$white;
    }
  }

  &__large#{&}__large--on-blueberry {
    background-color: palette.$white;

    &:hover {
      background-color: palette.$blueberry100;
    }

    &:focus {
      background-color: palette.$white;
    }
  }

  &__large--selected {
    background-color: palette.$blueberry500;
    color: palette.$white;

    &:hover {
      background-color: palette.$blueberry600;
    }
  }

  &__large#{&}__large--disabled {
    color: palette.$neutral700;
    background-color: palette.$neutral50;

    &:hover {
      background-color: palette.$neutral50;
    }

    &:focus {
      background-color: palette.$neutral50;
    }
  }

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    &__large {
      padding: 1.68rem spacers.getSpacer(l);
    }
  }
}

.radio-button {
  appearance: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rem;
  margin: 0 spacers.getSpacer(s) 0 0;
  height: 1.5rem;
  width: 1.5rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  color: palette.$neutral700;
  box-shadow: 0 0 0 spacers.getSpacer(4xs);
  outline: none;

  &:focus {
    box-shadow: 0 0 0 spacers.getSpacer(3xs);
    color: palette.$black;
  }

  &:hover {
    box-shadow: 0 0 0 spacers.getSpacer(3xs);
    background-color: palette.$neutral100;
  }

  :active > & {
    box-shadow: 0 0 0 spacers.getSpacer(3xs);
    color: palette.$black;
  }

  &:checked {
    color: palette.$blueberry500;

    &:hover {
      box-shadow: 0 0 0 spacers.getSpacer(4xs);
      background-color: palette.$blueberry50;
    }

    &:focus {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
      color: palette.$black;
    }
  }

  &--on-blueberry {
    color: palette.$blueberry500;

    :hover > & {
      background-color: palette.$blueberry100;
    }
  }

  &--on-dark {
    color: palette.$neutral200;

    &:hover {
      background-color: palette.$inverted-hover-old;
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
    }

    &:focus {
      color: palette.$white;
    }

    :active > & {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
      color: palette.$white;
    }

    &:checked {
      color: palette.$blueberry200;

      &:hover {
        background-color: palette.$inverted-hover-old;
      }

      &:focus {
        color: palette.$white;
      }
    }
  }

  &--invalid {
    color: palette.$cherry600;

    &:hover {
      background-color: palette.$cherry100;
    }

    &:active {
      color: palette.$black;
    }

    &:focus {
      color: palette.$black;
    }

    &:checked {
      color: palette.$cherry600;

      &:hover {
        background-color: palette.$cherry100;
      }
    }
  }

  &--disabled {
    cursor: default;

    @include dashed-border;

    background-color: transparent;

    &:hover {
      box-shadow: none;
      background-color: transparent;
    }

    :hover > & {
      background-color: transparent;
    }

    &:active {
      color: palette.$neutral600;
    }

    &:checked {
      color: palette.$neutral600;

      &:hover {
        box-shadow: none;
        background-color: transparent;
      }
    }
  }

  // :before er dot i RadioButton
  &:checked::before {
    content: '';
    display: flex;
    background-color: palette.$blueberry500;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 10rem;

    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
    @media (forced-colors: active) {
      forced-color-adjust: none;
      background-color: #fff !important;
    }
  }

  &--on-dark:checked::before {
    background-color: palette.$blueberry200;
  }

  &--invalid:checked::before {
    background-color: palette.$cherry600;
  }

  &--disabled:checked::before {
    background-color: palette.$neutral600;
  }

  &__large {
    &:checked {
      outline: none;
      color: palette.$blueberry100;
    }

    &:hover {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
    }

    &:focus {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
      color: palette.$black;
    }

    &:focus:checked {
      color: palette.$white;
    }

    &:checked::before {
      background-color: palette.$blueberry100;
    }

    &:checked:hover {
      box-shadow: 0 0 0 spacers.getSpacer(4xs);
      background-color: unset;
    }

    &:checked:hover:focus {
      box-shadow: 0 0 0 spacers.getSpacer(3xs);
      color: palette.$white;
    }

    &--invalid {
      &:checked {
        color: palette.$cherry500;
      }

      &:checked::before {
        background-color: palette.$cherry500;
      }

      &:checked:hover {
        background-color: transparent;
      }

      &:checked:focus {
        color: palette.$black;
      }

      &:checked:focus:hover {
        color: palette.$black;
      }
    }

    &--disabled {
      &:hover,
      &:focus,
      &:checked:hover {
        box-shadow: none;
      }

      &:checked::before {
        background-color: palette.$neutral600;
      }
    }
  }

  // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
  @media (forced-colors: active) {
    forced-color-adjust: none;
    color: #fff !important;
    background-color: transparent !important;
  }
}

.radiobutton-sublabel-wrapper {
  margin-top: -$padding-clickable-area-top-bottom;
  padding-left: calc(2.8rem + $padding-clickable-area-left);
}

.radiobutton-afterlabelchildren-wrapper {
  padding-top: $padding-clickable-area-top-bottom;
}