import styled from 'styled-components' ; import { StyledSelect } from './Select' ; const StyledDarkSelect = styled ( StyledSelect ) ( ( { theme } ) => `
  .react-select-container {
    background: transparent;
  }

  .react-select__option--is-focused:active {
    background-color: ${ theme . colors . grey [ 50 ] };
  }
  
  .react-select__value-container {
    padding: 0 8px;
  }

  .react-select__single-value {
    color: ${ theme . colors . text . primary }
  }

  
  .react-select__control {
    min-height: 34px;
    height: 34px;
    border-color: rgba(255, 255, 255, 0.24);
    color: ${ theme . colors . text . secondary };

    &:focus, &:active {
      background-color: ${ theme . colors . primary . lighter };
    }

    &:hover {
      border-color: rgba(255, 255, 255, 0.24);
      background-color: ${ theme . colors . primary . lighter };
      .react-select__dropdown-indicator {
        color: #666;
      }
    }

    .react-select__indicator,
    .react-select__dropdown-indicator {
      padding: 4px 8px;
      color: #666;
      &:hover {
        color: #999;
      }
    }
  }

  .react-select__control--menu-is-open {
    background-color: ${ theme . colors . primary . lighter };
    border-color: transparent;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.24);

    .react-select__indicator,
    .react-select__dropdown-indicator {
      color: #999 !important;
      &:hover {
        color: #ccc !important;
      }
    }
  }

  .react-select__input {
    color: ${ theme . colors . text . primary }
  }

  .react-select__placeholder {
    color: ${ theme . colors . text . secondary }
  }

  .react-select__option {
    padding: 4px 12px;
  } 

  .react-select__menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .react-select__multi-value {
    background-color: ${ theme . colors . primary . dark };
    border: 1px solid ${ theme . colors . text . placeholder };
  }

  .react-select__multi-value__label {
    color: ${ theme . colors . text . primary };
    padding: 0 6px;
  }

  .react-select--is-disabled {
    .react-select__single-value,
    .react-select__placeholder,
    .react-select__indicator {
      color: ${ theme . colors . text . placeholder };
    }
  }
` ) ; export default StyledDarkSelect ;