@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-inline {
  font-size: 0;
  position: relative;
  width: 100%;

  &::after {
    @extend %ods-text--size-delta;

    bottom: units.unit-to-rem(2);
    content: map.get(icon-map.$icons, "magnifying-glass-small") !important;
    font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
    line-height: 1em;
    position: absolute;
    right: units.unit-to-rem(4);
  }

  &__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.$blue-dark;
    border-radius: 0;
    display: inline-block;
    padding: units.unit-to-rem(2) units.unit-to-rem(12) units.unit-to-rem(2) units.unit-to-rem(4);
    width: 100%;
    appearance: none;

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

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

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

    &::-webkit-search-cancel-button {
      appearance: none;
      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;
    }

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

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

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

    cursor: pointer;
    display: block;
    width: 100%;

    & .ods-search-inline__input {
      @extend %ods-margin-top-2;
    }
  }


  &__dropdown {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-light;
    @extend %ods-padding-vertical-4;

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

    &--scroll {
      max-height: 200px;
      overflow-y: auto;
    }

    &__item {
      display: flex;
      flex-direction: column;
      padding: units.unit-to-rem(1) units.unit-to-rem(4);
      text-decoration: none;

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

      a {
        text-decoration: none;

        &:hover,
        &:focus {
          background-color: colors.$gray-light;
          border-top: 5px solid colors.$gray-light;
          border-bottom: 5px solid colors.$gray-light;
          color: states.$hover !important;
          margin: -5px -15px;
          padding: 0 15px;
          text-decoration: underline;
        }
      }
    }
  }
}