import styled from "styled-components";

export const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  .react-select {
    &__control {
      border-radius: 0;
      border: none;
      border-bottom: 1px solid #00000033;
    }
    &__control--is-focused {
      border-bottom: 1px solid #00000033;
      box-shadow: none;
    }
    &__control:hover {
      border: none;
      border-bottom: 1px solid #00000033 !important;
      box-shadow: 0 0 0 #fff;
    }
    &__indicator-separator {
      background: #fff;
    }
    &__multi-value {
      background: transparent;
      border-radius: 4px;
      &__label {
        color: #4D4F5C;
        font-size: 18px;
        padding: 0;
      }
      &__remove {
        display: none;
      }
    }
  }
`

export const Label = styled.label`
  font-size: 14px;
  margin: 0 0 4px 0;
  color: #4D4F5C;
`