import styled from 'styled-components';

export const Wrapper = styled.div`
  width: 360px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  padding-bottom: 1px;
  overflow: hidden;
  position: relative;
`;

export const HueWrapper = styled.div`
  height: 10px;
  position: relative;
  margin: 0 10px 10px;
`;

export const SaturationWrapper = styled.div`
  height: 146px;
  position: relative;
  margin-bottom: 10px;
`;

export const Label = styled.label`
  color: white;
  margin-right: 5px;
`;

export const InputWrapper = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 10px;

  span {
    display: none;
  }
`;

export const Swatch = styled('div')<{ bg: string }>`
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background-color: ${props => props.bg};
  margin-right: 10px;
`;