@use 'responsive';

.search {
  label {
    display: block;
    color: #ccc;
    margin-bottom: 0.25em;
  }

  &-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.25em;

    min-width: 200px;
    margin-right: 0.25em;
  }

  &-input {
    border: none;
    background-color: #424242;
    color: white;
    border-radius: 0.5em;

    padding: 0.35em 0.5em;
    width: 100%;
  }

  &-exit {
    background-color: #424242;
    border-radius: 0.5em;

    img {
      vertical-align: middle;
      height: 1.3em;
    }
  }

  &-button {
    width: 80%;
    max-width: 300px;
  }

  @include responsive.smallScreen {
    &-box,
    &-button {
      margin: 0.5em 0 0 0;
    }

    &-box {
      width: 100%;
    }
  }
}

.search-box > i {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0.5em;
}

select.search-input {

}