@use '@igo2/sdg-core' as sdg;
@use '@angular/material' as mat;

$blue-dark: var(--sdg-color-blue-dark);
$grey-medium: var(--sdg-color-grey-medium);
$grey-pale: var(--sdg-color-grey-pale);

@mixin focus-ring {
  position: relative;
  z-index: 1;
  border-color: var(--sdg-color-blue-light);
  box-shadow: inset 0 0 0 2px $blue-dark;
  outline: 2px solid var(--sdg-color-blue-light);

  &.--light {
    border-color: $grey-pale;
    outline-color: $grey-pale;
  }
}

:host {
  $height: var(--sdg-search-bar-height, 40px);

  display: block;
  max-width: 825px;

  @include mat.icon-button-overrides(
    (
      container-shape: 0,
      state-layer-size: $height,
      state-layer-color: transparent,
      focus-state-layer-opacity: 1,
      hover-state-layer-opacity: 1,
      pressed-state-layer-opacity: 1,
      ripple-color: transparent
    )
  );

  ::ng-deep {
    .mat-mdc-form-field {
      @include mat.form-field-overrides(
        (
          container-height: $height
        )
      );
    }

    .mat-mdc-form-field-subscript-wrapper {
      display: none;
    }

    .mat-mdc-text-field-wrapper {
      padding-right: 0 !important;
    }
  }

  @include sdg.media(mobile) {
    max-width: 100%;
  }
}

mat-form-field:has(input:focus) {
  &.--light {
    outline: 2px solid var(--sdg-color-grey-pale);
  }

  .sdg-search-bar {
    &-reset-button {
      border-color: $blue-dark;
      box-shadow:
        inset 0 1px 0 0 $blue-dark,
        inset 0 -1px 0 0 $blue-dark;
    }
  }
}

mat-form-field:focus-within .sdg-search-bar {
  &-reset-button:focus,
  &-search-button:focus {
    border-color: var(--sdg-color-blue-light);
    box-shadow: inset 0 0 0 2px $blue-dark;

    &.--light {
      border-color: $grey-pale;
    }
  }

  &-search-button {
    border-color: $blue-dark;
    box-shadow:
      inset 0 1px 0 0 $blue-dark,
      inset -1px 0 0 0 $blue-dark,
      inset 0 -1px 0 0 $blue-dark;
  }
}

.sdg-search-bar {
  &-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $grey-medium;
    border-left: none;
    border-right: none;

    &.--light {
      background-color: var(--sdg-color-background) !important;
    }

    &:hover,
    &:focus {
      background-color: $grey-pale;

      &.--light {
        background-color: $grey-pale !important;
      }
    }

    &:focus {
      @include focus-ring;
    }
  }

  &-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $grey-medium;
    border-left: none;
    background-color: var(--sdg-color-blue-piv) !important;

    &.--light {
      background-color: var(--sdg-color-background) !important;
    }

    &:hover,
    &:focus {
      background-color: var(--sdg-color-blue-normal) !important;

      &.--light {
        background-color: $grey-pale !important;
      }
    }

    &:focus {
      @include focus-ring;
    }

    &:active {
      background-color: #2586d6 !important;

      &.--light {
        background-color: $grey-pale !important;
      }
    }

    mat-icon {
      color: var(--sdg-color-white);

      &.--light {
        color: var(--sdg-color-blue-piv);
      }
    }
  }
}