import { mix } from 'polished';
import styled, { css } from 'styled-components';
import { readableColor, readableHue } from '../../styles';
import { defaultThemeProp } from '../../theme';
import { StyledText } from '../Text';
import { StyledIcon } from '../Icon';
import { UnorderedList } from '../List';
import { StyledCard } from '../Card';
import { StyledModal } from '../Modal/Modal.styles';
export const getVariantColors = (variant, theme) => {
    const variantBackground = theme.components.banner[variant].background;
    const background = mix(theme.components.banner[variant]['background-mix'], variantBackground, theme.base.palette['primary-background']);
    const iconColor = readableHue(variantBackground, background, {
        level: 'AANonText'
    });
    const borderColor = mix(0.7, iconColor, theme.base.palette['primary-background']);
    const textColor = readableColor(background);
    return {
        background,
        borderColor,
        iconColor,
        textColor
    };
};
export const StyledBanner = styled.div(({ theme, headingTag, variant }) => {
    const colors = getVariantColors(variant, theme);
    return css `
    padding: ${theme.base.spacing};
    color: ${colors.textColor};
    background: ${colors.background};
    border: 0.0625rem solid ${colors.borderColor};
    min-inline-size: 100%;
    inline-size: 0;
    min-block-size: 2.25rem;
    border-radius: ${theme.components.card['border-radius']};

    ${StyledCard} &,
    ${StyledModal} & {
      border-radius: calc(
        ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}
      );
    }

    &:has(${headingTag}${StyledText}:focus) {
      box-shadow: ${theme.base.shadow.focus};
    }

    ${headingTag}${StyledText} {
      word-break: break-word;
    }
  `;
});
StyledBanner.defaultProps = defaultThemeProp;
export const StyledBannerStatus = styled.div(({ theme, variant }) => {
    const colors = getVariantColors(variant, theme);
    return css `
      block-size: ${theme.base['hit-area']['mouse-min']};

      @media (pointer: coarse) {
        & {
          block-size: ${theme.base['hit-area']['finger-min']};
        }
      }

      ${StyledIcon} {
        color: ${colors.iconColor};
      }
    `;
});
StyledBannerStatus.defaultProps = defaultThemeProp;
export const StyledBannerMessageList = styled(UnorderedList) `
  padding-inline-start: 0;
`;
StyledBannerMessageList.defaultProps = defaultThemeProp;
export const StyledBannerMessage = styled.span `
  overflow-wrap: break-word;
  list-style: none;
`;
StyledBannerMessage.defaultProps = defaultThemeProp;
export const StyledBannerMessageLabel = styled.span(({ theme }) => css `
    font-weight: ${theme.base['font-weight']['semi-bold']};
  `);
StyledBannerMessageLabel.defaultProps = defaultThemeProp;
//# sourceMappingURL=Banner.styles.js.map