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

  &__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(4);
    width: calc(100% - 3.25rem);
    appearance: none;

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

    &: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 {
      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;
    @extend %ods-margin-left-2;

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

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

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

    &:focus {
      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;
    }
  }

  &__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;
    }
  }
}