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

.SearchBox {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  margin: 20px;
  position: relative;

  &-Input {
    flex: 1 1 auto;
    padding-left: 32px;

    &:focus {
      border-color: var(--project-color-primary, get(color 'blue'));
      box-shadow: none;
    }

    &:focus + .SearchBox-Search {
      color: var(--project-color-primary, get(color 'blue'));
    }

    // remove safari search padding
    &::-webkit-search-decoration {
      -webkit-appearance: none;
    }
  }

  &-Search,
  &-Spinner {
    color: get(color 'chalk');
    bottom: 0;
    left: 12px;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    top: 0;
  }

  &-Search {
    height: 16px;
    width: 16px;
  }

  &-Spinner {
    animation: spin .5s infinite linear;
    border: 2px solid #fff;
    border-bottom-color:currentColor;
    border-left-color: currentColor;
    border-radius: 14px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 14px;
    pointer-events: none;
    width: 14px;

    @keyframes spin {
      0% {
        transform:rotate(0)
      }
      100% {
        transform:rotate(1turn)
      }
    }
  }
}