import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { StyledPseudoRadioCheck } from '../RadioCheck/RadioCheck';
import { StyledFieldValueList, StyledStackedFieldValue } from '../FieldValueList';
import { StyledIcon } from '../Icon';
export const StyledSelectionCard = styled.div(({ disabled, theme: { base: { palette, 'disabled-opacity': disabledOpacity }, components: { card, 'form-control': { ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor } } } } }) => {
    return css `
      min-width: min-content;
      max-width: max-content;
      background-color: ${card.background};
      border-radius: ${card['border-radius']};
      border: 0.0625rem solid ${palette['border-line']};

      ${disabled &&
        css `
        cursor: not-allowed;
        opacity: ${disabledOpacity};
      `}

      ${!disabled &&
        css `
        :focus {
          box-shadow: ${shadow};
          border-color: transparent;
          outline: none;

          & ${StyledPseudoRadioCheck} {
            box-shadow: ${shadow};
            border-color: ${focusBorderColor};
          }
        }
      `}
    `;
});
StyledSelectionCard.defaultProps = defaultThemeProp;
export const StyledSelectionCardInline = styled(StyledSelectionCard)(({ placement, size }) => {
    let imageContainerSize;
    switch (size) {
        case 'small':
            imageContainerSize = '2.5rem';
            break;
        case 'large':
            imageContainerSize = '8.875rem';
            break;
        default:
            imageContainerSize = 'minmax(2.5rem, auto)';
            break;
    }
    return css `
    /* stylelint-disable unit-allowed-list -- "Unexpected unit "fr\`" */
    grid-template-columns: ${placement === 'inline-end'
        ? `1fr ${imageContainerSize}`
        : `${imageContainerSize} 1fr`};
    /* stylelint-enable unit-allowed-list */
    grid-template-rows: minmax(2.75rem, 1fr);
  `;
});
export const StyledSelectionCardStacked = styled(StyledSelectionCard)(({ size }) => {
    let containerSize;
    switch (size) {
        case 'small':
            containerSize = '2.5rem';
            break;
        case 'large':
            containerSize = '15.125rem';
            break;
        default:
            containerSize = 'minmax(2.5rem, 15.125rem)';
    }
    return css `
    grid-template-rows: ${containerSize} 1fr;
    grid-template-columns: minmax(2.75rem, 1fr);
  `;
});
export const StyledImageContainer = styled.div(({ theme: { base: { palette, transparency }, components: { card: { 'border-radius': borderRadius } } }, placement = 'inline-start', size = 'flexible' }) => {
    return css `
      background-color: ${palette['app-background']};
      overflow: hidden;

      img {
        height: 100%;
        object-fit: contain;
      }

      > img {
        aspect-ratio: 4 / 5;

        ${placement === 'block-start' &&
        css `
          aspect-ratio: 16 / 9;
          max-height: 100%;
        `}
      }

      ${size === 'flexible' &&
        placement !== 'block-start' &&
        css `
        max-width: 8.875rem;
        height: var(--content-height);
      `};

      ${size === 'large' &&
        css `
        min-height: 11.0625rem;
      `}

      ${size === 'small' &&
        css `
        aspect-ratio: unset;

        > img {
          max-width: 2rem;
          max-height: 2rem;
          aspect-ratio: 1 / 1;
        }
      `}

      /* Recalculation of the border radius by substracting border width */
      ${placement === 'inline-start' &&
        css `
        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
        border-end-start-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${placement === 'inline-end' &&
        css `
        border-end-end-radius: calc(${borderRadius} - 0.0625rem);
        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${placement === 'block-start' &&
        css `
        border-start-start-radius: calc(${borderRadius} - 0.0625rem);
        border-start-end-radius: calc(${borderRadius} - 0.0625rem);
      `}

      ${StyledIcon} {
        opacity: ${transparency['transparent-3']};
      }
    `;
});
StyledImageContainer.defaultProps = defaultThemeProp;
export const StyledValueList = styled.ul `
  width: 100%;
  list-style-type: none;
`;
export const StyledContentContainer = styled.div(({ theme }) => {
    return css `
    padding: ${theme.base.spacing};

    ${StyledFieldValueList}, ${StyledValueList} {
      margin-block-start: ${theme.base.spacing};
    }

    ${StyledStackedFieldValue} {
      grid-column: 1 / -1;
    }
  `;
});
StyledContentContainer.defaultProps = defaultThemeProp;
//# sourceMappingURL=SelectionCard.styles.js.map