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

.sticky-note {
  $sticky-note: &;

  position: relative;
  background-color: var(--component-stickynote-background-normal-light);
  width: 100%;
  max-width: 32rem;
  border: var(--component-stickynote-border-normal) 1px solid;
  padding: 12px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);

  &--focused {
    box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
    border-color: var(--color-action-border-onlight-focus);
    background-color: var(--component-stickynote-background-normal-medium);
  }

  &--hovered {
    background-color: var(--component-stickynote-background-normal-medium);
  }

  &--active {
    background-color: var(--component-stickynote-background-normal-dark);
  }

  &--error {
    background-color: var(--component-stickynote-background-error-light);
    border: var(--component-stickynote-border-error) 1px solid;

    &#{$sticky-note}--hovered {
      background-color: var(--component-stickynote-background-error-medium);
    }

    &#{$sticky-note}--focused {
      box-shadow: inset 0 0 0 1px var(--color-action-border-onlight-focus);
      border-color: var(--color-action-border-onlight-focus);
      background-color: var(--component-stickynote-background-error-medium);
    }

    &#{$sticky-note}--active {
      background-color: var(--component-stickynote-background-error-dark);
    }
  }

  &__header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    &__timestamp {
      @include fonts.compact-data;

      color: var(--color-placeholder-text-onlight);
    }
  }

  &__textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    background: transparent;
    outline: none;
    line-height: 28px;

    &:disabled {
      // Dette er for å unngå at disabled tekst ikke validerer på iOS
      -webkit-text-fill-color: var(--color-base-text-onlight);
      opacity: 1;
    }
  }

  &__footer {
    @include fonts.image-credit;

    color: var(--color-placeholder-text-onlight);
  }

  &__triangle {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
  }

  &__error-text {
    @include fonts.sublabel-subdued;

    color: var(--color-notification-status-error);
    margin-top: 0.5rem;
  }
}

$desktop-size: 3rem;
$mobile-inner-size: 2.375rem;
$mobile-outer-size: 2.75rem;

.close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 2px;
  height: $mobile-outer-size;
  width: $mobile-outer-size;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;

  &:focus-visible {
    outline: none;
  }

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

  &--small {
    height: $mobile-outer-size;
    width: $mobile-outer-size;
  }

  &__inner-container {
    width: $mobile-inner-size;
    height: $mobile-inner-size;

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

    &--small {
      width: $mobile-inner-size;
      height: $mobile-inner-size;
    }

    :hover > & {
      background-color: var(--component-stickynote-background-transparent-onlight-hover);
    }

    :active > & {
      background-color: var(--component-stickynote-background-transparent-onlight-active);
    }

    :focus-visible > & {
      outline: 3px solid var(--color-action-border-onlight-focus);
      border-radius: 0;
      border: 0;
    }

    &--error {
      :hover > & {
        background-color: var(--component-stickynote-background-transparent-error-hover);
      }

      :active > & {
        background-color: var(--component-stickynote-background-transparent-error-active);
      }
    }
  }
}