/* Components :: Search :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-search {
  @include flex($direction: column);

  position: relative;
  width: 100%;

  &__inner-wrapper {
    width: 100%;
  }

  &__icon,
  &__close {
    fill: fabric-color('medium-grey');
    font-size: 20px;
    position: absolute;
    z-index: 1;
    > svg {
      fill: fabric-color('medium-grey');
    }
  }

  &__icon {
    left: $fabric-global-spacing-unit-small;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  &__close {
    right: $fabric-global-spacing-unit-small;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  &__label {
    margin-bottom: $fabric-global-spacing-unit-small;
  }

  &__input {
    @include fabric-font-size(16px);

    border: 1px solid fabric-color('light-grey');
    color: fabric-color('grey');
    font-family: 'FS-Emeric-Regular', sans-serif;
    padding: $fabric-global-spacing-unit-tiny $fabric-global-spacing-unit-large;
    width: 100%;

    .c-search--lg & {
      padding: $fabric-global-spacing-unit-small
        $fabric-global-spacing-unit-large;
    }

    &:focus {
      outline: none;
    }
  }

  &__close {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 0;
    padding: 0;
    transition: opacity 250ms;
    visibility: visible;
    opacity: 1;

    &--hidden {
      visibility: hidden;
      opacity: 0;
    }

    &:focus {
      outline: none;
    }
  }
}