@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/icon-map";
@use "system/spacing";
@use "system/units";
@use "system/states";
@use "sass:map";

.ods-search-circle {
  font-size: 0;
  position: relative;
  width: 100%;

  &__wrapper {
    display: inline-block;
    width: calc(100% - 2.75rem);

    @include breakpoints.large {
      width: calc(100% - 3rem);
    }
  }

  &__input {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-light;
    @extend %ods-color-text-blue-dark;

    background-color: colors.$white;
    border: 0.125rem solid colors.$yellow;
    border-radius: 0;
    display: inline-block;
    font-family: inherit;
    padding: units.unit-to-rem(2) units.unit-to-rem(4);
    width: 100%;
    appearance: none;

    &:hover {
      border: 0.125rem solid colors.$blue-state;
    }

    &:focus {
      border: 0.125rem solid colors.$blue-state;
    }

    &:focus-visible {
      outline: 0.25rem solid colors.$purple-light;
    }

    &::-webkit-search-cancel-button {
      background: url("/node_modules/@oslokommune/oslo-designsystem/src/assets/icons/cross.svg") no-repeat;
      background-size: contain;
      height: 2rem;
      margin-right: -5px;
      opacity: 0;
      pointer-events: none;
      width: 2rem;
      appearance: none;
    }

    &:focus::-webkit-search-cancel-button {
      opacity: 1;
      pointer-events: all;
    }

    &::placeholder {
      @extend %ods-color-text-grayscale-50;
    }
  }

  &__button {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;
    @extend %ods-padding-2;

    background-color: colors.$yellow;
    border: 0.125rem solid colors.$yellow;
    border-radius: 50%;
    box-sizing: content-box;
    color: colors.$blue-dark;
    cursor: pointer;
    display: inline-block;
    height: 1.5rem;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    width: 1.5rem;

    @include breakpoints.large {
      height: 1.75rem;
      width: 1.75rem;
    }

    &:hover {
      background-color: states.$hover !important;
      border: 0.125rem solid states.$hover !important;
      color: states.$hover-text !important;
    }

    &:focus-visible {
      outline: 0.25rem solid colors.$purple-light;
      border: 0.125rem solid colors.$blue-state;
      background-color: colors.$blue-state;
      color: states.$hover-text !important;
    }
  }

  &__button-icon {
    @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-large;

    line-height: 1.5rem;

    @include breakpoints.large {
      line-height: 1.75rem;
    }

    display: inline-block;
    vertical-align: top;

    &::before {
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      content: map.get(icon-map.$icons, "magnifying-glass-small") !important;
    }
  }

  &__container {
    background-color: colors.$white;
    box-shadow: 0 7px 10px 0 rgb(0 0 0 / 10%);
    left: 0;
    list-style: none;
    position: absolute;
    right: 2.75rem;
    z-index: 99999;

    @include breakpoints.large {
      right: 3rem;
    }
  }

  &__no-result {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;
    @extend %ods-padding-4;

    display: block;
  }

  &__missing-input {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;
    @extend %ods-text--align-center;
    @extend %ods-padding-horizontal-4, %ods-padding-vertical-3;

    display: block;
  }

  &__suggestion {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;
    @extend %ods-padding-horizontal-4;

    display: block;

    &:hover,
    &:focus,
    &--focus {
      background-color: colors.$gray-light;
      color: states.$hover;
      text-decoration: underline;
    }
  }

  &__dropdown {
    &--compact {
      @extend %ods-padding-vertical-4;

      & .ods-search-circle__suggestion {
        @extend %ods-padding-vertical-1;
      }
    }
  }

  &__item {
    &--footer {
      @extend %ods-text--size-lima;
      @extend %ods-text--weight-regular;
      @extend %ods-padding-horizontal-4;

      &-first {
        @extend %ods-padding-top-4;
      }

      &-last {
        @extend %ods-padding-bottom-4;

        &:focus-visible {
          @extend %ods-margin-bottom-4, %ods-margin-left-4;
          @extend %ods-padding-0;

          outline: none;
          color: states.$hover !important;
          background-color: colors.$purple-light;
        }
      }
    }
  }


  &__heading {
    @extend %ods-text--size-juliett;
    @extend %ods-text--weight-medium;
  }

  &__link {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-medium;
    @extend %ods-padding-4;

    display: block;
    text-decoration: none;

    &--focus .ods-search-circle__heading,
    &:focus .ods-search-circle__heading,
    &:hover .ods-search-circle__heading {
      text-decoration: underline;
    }

    &:hover,
    &:focus,
    &--focus {
      background-color: colors.$gray-light;
      color: states.$hover;
      text-decoration: none;
    }

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }

    &--divider {
      border-bottom: 0.0625rem solid colors.$gray;
    }
  }

  &__text {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
    @extend %ods-margin-top-1;
  }
}