import styled from 'styled-components';
import { BoxBlock } from "../../../modules";
import { AlignCenter, colors } from "../../../globalStyled";
export const DropdownWrapperDiv = styled(BoxBlock) `
  width: 100%;

  .popup {
    position: relative;

    & > .popup-content {
      position: absolute;

      background-color: #fff;
      box-shadow: $box-shadow;
      border-radius: $border-radius;
      opacity: 0;
      visibility: hidden;
      z-index: 10;
    }

    &.popup-isOpened {
      & > .popup-content {
        visibility: visible;
        opacity: 1;
        width: 100%;
      }

      .select-str {
        transform: rotate(180deg);
      }
    }
  }
`;
export const DropdownLabelDiv = styled(BoxBlock) `
  color: ${colors.grays.text};
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.05px;
  margin-bottom: 8px;
`;
export const DropdownInputContentDiv = styled(BoxBlock) `
  white-space: nowrap;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.2px;
  flex: 1 1 100%;
  overflow: hidden;
  text-overflow: ellipsis;
`;
export const DropdownTriggerDiv = styled(BoxBlock) `
  ${AlignCenter}
  background: ${colors.white};
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 40px;
  cursor: pointer;
  border: ${({ required }) => required ? `1px solid ${colors.error} !important` : `1px solid ${colors.grays.border}`};

  ${({ disabled }) => disabled &&
    `
    opacity: 0.6;
    cursor: not-allowed;
  `}
`;
export const ChevronDownDiv = styled(BoxBlock) `
  width: 24px;
  height: 24px;

  svg {
    width: 100%;
    height: 100%;
    fill: ${colors.tabsHover};
  }
`;
