@import '../../../../scss/styles.scss';

$icon-width: base(2);
$icon-margin: base(0.25);

@layer payload-default {
  .block-search {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    z-index: 1;

    &__input {
      @include formInput;
    }

    .icon--search {
      position: absolute;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      right: 0;
      width: $icon-width;
      margin: 0 $icon-margin;

      .stroke {
        stroke: var(--theme-elevation-300);
      }
    }

    @include mid-break {
      &__input {
        margin-bottom: 0;
      }
    }
  }
}