@import 'responsive.scss';

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

  &-box {
    position: relative;

    display: flex;

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

  &-input {
    border: none;
    background-color: #424242;

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

  &-exit {
    background-color: #424242;

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

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

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

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