@use "@material/animation/_index" as animation;
@use "@material/elevation/_index" as elevation;
@use "@material/ripple/_index" as ripple;
@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;

$enter-time: 250ms;
$exit-time: 200ms;

.search-bar {
  &-anchor {
    @include rtl.reflexive-box(margin, right, 8px);
  }
  &--persistent {
    height: 40px;
    .search-bar__field.mdc-text-field {
      height: 100%;
      width: 128px;
      transition: animation.standard(width, 250ms), elevation.transition-value();
      &--with-leading-icon .mdc-text-field__icon,
      &--with-trailing-icon .mdc-text-field__icon {
        &:focus {
          outline: none;
        }
      }
      &--focused {
        width: 256px;
      }
      &__input {
        padding-top: 16px;
      }
      .mdc-icon-button {
        height: 36px;
        width: 36px;
        padding: (40px - 24px - 4px) / 2;
      }
    }
    &.search-bar--expanded {
      .search-bar__field.mdc-text-field {
        width: 256px;
      }
    }
  }
  &--modal {
    position: absolute;
    @include rtl.reflexive-position(right, 0);
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    display: none;
    justify-content: stretch;
    align-items: center;
    opacity: 1;
    transition-property: width, opacity;
    transition-timing-function: animation.$standard-curve-timing-function;
    .mdc-text-field--with-trailing-icon
      .mdc-text-field__icon
      ~ .mdc-text-field__icon {
      transform: scale(1) translateY(-50%);
      opacity: 1;
      transition: animation.standard(opacity, 150ms),
        animation.standard(transform, 150ms);
      outline: none;
    }
    .search-bar__field-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: stretch;
      align-items: center;
      z-index: 4;
      position: relative;
      .search-bar__field.mdc-text-field {
        flex-grow: 1;
        @include shape.radius(0);
        &--with-leading-icon .mdc-text-field__icon,
        &--with-trailing-icon .mdc-text-field__icon {
          &:focus {
            outline: none;
          }
        }
        .mdc-notched-outline {
          display: none;
        }
      }
    }
    &.search-bar--animate .search-bar__field-container {
      opacity: 0;
      width: 64px;
      .mdc-text-field--with-trailing-icon
        .mdc-text-field__icon
        ~ .mdc-text-field__icon {
        transform: scale(0.92) translateY(-50%);
        opacity: 0;
      }
    }
    &.search-bar--opening .search-bar__field-container {
      opacity: 1;
      width: 100%;
      .mdc-text-field--with-trailing-icon
        .mdc-text-field__icon
        ~ .mdc-text-field__icon {
        transform: scale(1) translateY(-50%);
        opacity: 0;
      }
      transition-duration: $enter-time;
    }
    &.search-bar--closing .search-bar__field-container {
      opacity: 0;
      width: 64px;
      transition-duration: $exit-time;
      .mdc-text-field--with-trailing-icon
        .mdc-text-field__icon
        ~ .mdc-text-field__icon {
        transform: scale(0.92);
        opacity: 0;
      }
    }
    &.search-bar--open {
      display: flex;
    }
  }
}

.mdc-top-app-bar.search-app-bar {
  @include elevation.elevation(0);
  transition: animation.standard(top, 200ms);
  top: -56px;
  .search-bar__field-container {
    transition: elevation.transition-value();
  }
  &--open {
    top: 0;
    .search-bar__field-container {
      @include elevation.elevation(4);
    }
  }
  & + .mdc-top-app-bar--fixed-adjust {
    padding-top: 0;
    transition: animation.standard(padding-top, 200ms);
  }
  &.search-app-bar--open + .mdc-top-app-bar--fixed-adjust {
    padding-top: 56px;
  }
}
