@use "../../utilities";
@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/typography";
@use "../../variables/zindex";
@use "../form-control";

@use "../../di";

@use "search-bar.variables" as css-search-bar-variables;

.dso-search-bar {
  display: flex;
  margin-block-end: 16px;

  .dso-search-bar-input {
    position: relative;
    inline-size: 100%;

    .dso-search-icon {
      inset-block-end: units.$u1;
      font-size: 0;
      block-size: css-search-bar-variables.$block-size;
      inset-inline-start: 0;
      line-height: css-search-bar-variables.$block-size;
      padding: units.$u1;
      position: absolute;
      text-align: center;
      inset-block-start: 0;
      inline-size: css-search-bar-variables.$block-size;
      z-index: zindex.$searchbar-icon;

      &::before {
        @include di.base("search");

        content: "";
        display: inline-block;
        font-size: 1rem;
      }

      + input,
      + dso-autosuggest > input {
        padding-inline-start: css-search-bar-variables.$block-size;
      }
    }

    input {
      @include utilities.placeholder(colors.$input-color-placeholder);

      background-color: colors.$wit;
      background-image: none;
      border: 1px solid form-control.$focus-border-color;
      border-radius: 4px;
      box-shadow: none;
      display: block;
      font-size: typography.$root-font-size-base;
      block-size: css-search-bar-variables.$block-size;
      line-height: css-search-bar-variables.$block-size;
      padding-block: 6px;
      padding-inline: units.$u1 css-search-bar-variables.$block-size;
      transition:
        border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
      inline-size: 100%;

      &:focus {
        border-color: form-control.$focus-border-color;
        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;
        outline: 0;
      }

      &::-ms-clear {
        display: none;
      }
    }

    button {
      background-color: transparent;
      border: 0;
      box-shadow: none;
      color: colors.$grasgroen;
      font-size: 0;
      block-size: css-search-bar-variables.$block-size;
      padding: units.$u1;
      position: absolute;
      inset-inline-end: 0;
      text-align: center;
      inset-block-start: 0;
      inline-size: css-search-bar-variables.$block-size;

      &::before {
        @include di.base("cross");

        content: "";
        display: inline-block;
        font-size: typography.$root-font-size-base;
      }
    }

    label {
      flex-grow: 1;
      margin-block-end: units.$u1;
      inline-size: 100%;

      + .dso-search-icon {
        inset-block-start: css-search-bar-variables.$icon-block-start;

        + input,
        + dso-autosuggest {
          + button {
            inset-block-start: css-search-bar-variables.$icon-block-start;
          }
        }
      }

      + input,
      + dso-autosuggest {
        + button {
          inset-block-start: css-search-bar-variables.$icon-block-start;
        }
      }

      &.sr-only,
      &.dso-search-icon {
        + .dso-search-icon {
          inset-block-start: 0;

          + input,
          + dso-autosuggest {
            + button {
              inset-block-start: 0;
            }
          }
        }

        + input,
        + dso-autosuggest {
          + button {
            inset-block-start: 0;
          }
        }
      }
    }
  }

  .dso-search-bar-input + button {
    align-self: flex-end;
    block-size: css-search-bar-variables.$block-size;
    line-height: calc(css-search-bar-variables.$block-size - 2px);
    margin-block: 0;
    margin-inline: units.$u1 0;
    min-inline-size: initial;
    padding-block: 0;
    padding-inline: units.$u2;
    text-align: center;
  }

  + .dso-results {
    color: colors.$grijs-60;
    font-weight: 700;
    margin-block-start: units.$u1;
  }

  &.dso-invalid .dso-search-bar-input input {
    border-color: css-search-bar-variables.$invalid-input-border-color;

    &:focus {
      box-shadow: inset 0 0 0 css-search-bar-variables.$focus-border-width
        css-search-bar-variables.$invalid-input-border-color;
    }
  }
}