import { Description, descriptionClassnames } from '../Description';
import { styled } from '../styled';
import { Typography } from '../Typography';
import { descriptionListClassnames } from './constants';
export const StyledDescriptionName = styled(Description.Name, {
    shouldForwardProp: (prop) => !['$nameMaxWidth', '$direction'].includes(prop),
}) `
  max-width: ${({ $nameMaxWidth }) => ($nameMaxWidth ? $nameMaxWidth : 'none')};
  margin-bottom: ${({ theme, $direction }) => Object.is($direction, 'column') ? theme.spacing(1) : 0};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme, $direction }) => Object.is($direction, 'row') ? 0 : theme.spacing(1)};
  }
`;
export const Wrapper = styled.article `
  display: grid;

  border-radius: ${({ theme }) => theme.shape.small};

  &.${descriptionListClassnames.contained} {
    padding: ${({ theme }) => theme.spacing(4)};

    background-color: ${({ theme }) => theme.palette.background.default};
    border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  }
`;
export const ListWrapper = styled('dl', {
    shouldForwardProp: (prop) => !['$direction', '$hasDivider', '$variant'].includes(prop),
}) `
  display: grid;
  row-gap: ${({ theme, $direction }) => Object.is($direction, 'column') ? theme.spacing(3) : theme.spacing(2)};

  margin: 0;
  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(4, 0) : theme.spacing(3, 0)};

  border-top: ${({ $hasDivider, theme }) => $hasDivider
    ? `1px solid ${theme.palette.components.border.default}`
    : 'none'};

  &:first-of-type {
    padding-top: 0;
  }

  &:last-of-type {
    padding-bottom: 0;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    row-gap: ${({ theme }) => theme.spacing(3)};
  }
`;
export const StyledDescriptionValue = styled(Description.Value, {
    shouldForwardProp: (prop) => !['$isCopy'].includes(prop),
}) `
  display: ${({ $isCopy }) => $isCopy && 'flex'};

  width: ${({ $isCopy }) => $isCopy && 'calc(100% - 20px)'};
`;
export const DescriptionWrapper = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};

  ${({ theme }) => theme.breakpoints.up('sm')} {
    &.${descriptionListClassnames.itemAlignNameWidth} {
      display: grid;
      grid-template-columns: var(--name-desktop-width) 1fr;

      & .${descriptionListClassnames.note} {
        grid-column: 1 / -1;
      }

      & .${descriptionClassnames.root} {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: inherit;
        gap: ${({ theme }) => theme.spacing(1)};

        /* Причина игнора: прогрессивное улучшение */
        /* stylelint-disable plugin/no-unsupported-browser-features */
        @supports (grid-template-columns: subgrid) {
          grid-template-columns: subgrid;
        }
        /* stylelint-enable plugin/no-unsupported-browser-features */
      }
    }
  }
`;
export const Title = styled(Typography) `
  margin-bottom: ${({ theme }) => theme.spacing(3)};
`;
