"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledTypography = exports.Container = exports.StyledChevron = exports.StyledButton = void 0;
const Button_1 = require("../../Button");
const Chevron_1 = require("../../Chevron");
const styled_1 = require("../../styled/styled");
const Typography_1 = require("../../Typography");
exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
  display: flex;
  align-items: center;

  min-width: 148px;
  max-width: 300px;
  height: auto;
  padding: ${({ theme }) => theme.microSpacing(2, 1, 2, 4)};

  text-align: left;

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
  }

  &:active {
    color: ${({ theme }) => theme.palette.primary[800]};

    background-color: ${({ theme }) => theme.palette.primary[100]};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    justify-content: space-between;

    width: 100%;
    max-width: unset;

    border-radius: 0;

    &:hover {
      background-color: initial;
    }

    &:active {
      background-color: ${({ theme }) => theme.palette.primary[100]};
    }
  }
`;
exports.StyledChevron = (0, styled_1.styled)(Chevron_1.Chevron) `
  width: 24px;
  height: 24px;
`;
exports.Container = styled_1.styled.div `
  display: flex;
  flex-direction: column;

  max-width: 260px;
`;
exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {
    shouldForwardProp: (prop) => !['$isDisabled'].includes(prop),
}) `
  color: ${({ $isDisabled }) => $isDisabled && 'inherit'};
`;
