"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Title = exports.StyledTypography = exports.Content = exports.IconWrapper = exports.Wrapper = exports.StyledIconButton = exports.StyledGrid = void 0;
const Grid_1 = require("../Grid");
const IconButton_1 = require("../IconButton");
const SvgIcon_1 = require("../SvgIcon");
const styled_1 = require("../styled");
const Typography_1 = require("../Typography");
const constants_1 = require("./constants");
exports.StyledGrid = (0, styled_1.styled)(Grid_1.Grid) `
  grid-auto-flow: column;
  grid-column: 2 / -1;
  justify-content: flex-start;
`;
exports.StyledIconButton = (0, styled_1.styled)(IconButton_1.IconButton) `
  grid-column: 3;
  grid-row: 1;

  &:hover {
    background-color: rgb(0 0 0 / 4%);
  }
`;
exports.Wrapper = styled_1.styled.div `
  display: grid;
  grid-template-columns: 20px 1fr 32px;
  gap: ${({ theme }) => theme.microSpacing(7, 4)};

  padding: ${({ theme }) => theme.microSpacing(9, 8, 9, 8)};

  border: 1px solid transparent;
  border-radius: ${({ theme }) => theme.shape.medium};

  &.${constants_1.alertClassnames.severityInfo} {
    background-color: ${({ theme }) => theme.palette.primary[100]};
    border-color: ${({ theme }) => theme.palette.primary[300]};

    .${constants_1.alertClassnames.iconWrapper} {
      color: ${({ theme }) => theme.palette.primary[800]};
    }
  }

  &.${constants_1.alertClassnames.severitySuccess} {
    background-color: ${({ theme }) => theme.palette.success[100]};
    border-color: ${({ theme }) => theme.palette.success[300]};

    .${constants_1.alertClassnames.iconWrapper} {
      color: ${({ theme }) => theme.palette.success[800]};
    }
  }

  &.${constants_1.alertClassnames.severityError} {
    background-color: ${({ theme }) => theme.palette.error[100]};
    border-color: ${({ theme }) => theme.palette.error[300]};

    .${constants_1.alertClassnames.iconWrapper} {
      color: ${({ theme }) => theme.palette.error[800]};
    }
  }

  &.${constants_1.alertClassnames.severityWarning} {
    background-color: ${({ theme }) => theme.palette.warning[100]};
    border-color: ${({ theme }) => theme.palette.warning[300]};

    .${constants_1.alertClassnames.iconWrapper} {
      color: ${({ theme }) => theme.palette.warning[800]};
    }
  }

  /* hasCloseButton only */
  &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
  }

  /* hasActions only */
  &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(9, 8, 8, 8)};
  }

  /* hasActions and hasCloseButton */
  &.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
  }

  /* hasTitle only */
  &.${constants_1.alertClassnames.hasTitle}:not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(6, 8, 6, 8)};
  }

  /* hasTitle and hasCloseButton */
  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasActions}) {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 6, 8)};
  }

  /* hasTitle and hasActions */
  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasCloseButton}) {
    padding: ${({ theme }) => theme.microSpacing(6, 8, 8, 8)};
  }

  /* all three */
  &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton} {
    padding: ${({ theme }) => theme.microSpacing(6, 6, 8, 8)};
  }

  &.${constants_1.alertClassnames.hasTitle} {
    gap: ${({ theme }) => theme.spacing(3, 2)};

    .${constants_1.alertClassnames.contentWrapper} {
      grid-template-rows: minmax(32px, auto) auto;
      align-items: center;
    }

    .${constants_1.alertClassnames.content} {
      grid-row: 2;
    }
  }

  &:not(.${constants_1.alertClassnames.hasTitle}) {
    .${constants_1.alertClassnames.contentWrapper} {
      align-items: flex-start;
    }
  }

  &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
    .${constants_1.alertClassnames.iconWrapper} {
      padding-top: ${({ theme }) => theme.microSpacing(3)};
    }
  }

  &.${constants_1.alertClassnames.hasCloseButton} {
    .${constants_1.alertClassnames.title} {
      grid-column: 2;
    }

    &:not(.${constants_1.alertClassnames.hasTitle}) {
      .${constants_1.alertClassnames.content} {
        grid-column: 2;
      }

      .${constants_1.alertClassnames.contentWrapper} {
        grid-template-rows: minmax(32px, auto);
      }

      .${constants_1.alertClassnames.content} {
        padding: ${({ theme }) => theme.microSpacing(3, 0)};
      }
    }

    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}) {
      .${constants_1.alertClassnames.content} {
        padding: ${({ theme }) => theme.microSpacing(3, 0, 0)};
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    grid-row-gap: ${({ theme }) => theme.spacing(4)};
    grid-template-columns: 24px 1fr 40px;

    padding: ${({ theme }) => theme.microSpacing(8, 8, 9, 8)};

    .${constants_1.alertClassnames.contentWrapper} {
      grid-template-columns: 24px 1fr 40px;
    }

    /* hasCloseButton only */
    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 9, 8)};
    }

    /* hasActions only */
    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
    }

    /* hasActions and hasCloseButton */
    &.${constants_1.alertClassnames.hasCloseButton}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
    }

    /* hasTitle only */
    &.${constants_1.alertClassnames.hasTitle}:not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 8, 8)};
    }

    /* hasTitle and hasCloseButton */
    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasActions}) {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 8, 8)};
    }

    /* hasTitle and hasActions */
    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasCloseButton}) {
      padding: ${({ theme }) => theme.microSpacing(8, 8, 10, 8)};
    }

    /* нет модификаторов */
    &:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}):not(.${constants_1.alertClassnames.hasCloseButton}) {
      .${constants_1.alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(1)};
      }
    }

    /* all three */
    &.${constants_1.alertClassnames.hasTitle}.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton} {
      padding: ${({ theme }) => theme.microSpacing(4, 4, 10, 8)};
    }

    /* for close button without title */
    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
      .${constants_1.alertClassnames.iconWrapper} {
        padding-top: ${({ theme }) => theme.spacing(2)};
      }
    }

    /* close button only case */
    &.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasActions}) {
      .${constants_1.alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(5)};
        padding-bottom: 0;
      }
    }

    /* actions only case */
    &.${constants_1.alertClassnames.hasActions}:not(.${constants_1.alertClassnames.hasTitle}):not(.${constants_1.alertClassnames.hasCloseButton}) {
      .${constants_1.alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(1)};
        padding-bottom: 0;
      }
    }

    /* actions + close button case */
    &.${constants_1.alertClassnames.hasActions}.${constants_1.alertClassnames.hasCloseButton}:not(.${constants_1.alertClassnames.hasTitle}) {
      .${constants_1.alertClassnames.content} {
        padding-top: ${({ theme }) => theme.microSpacing(5)};
        padding-bottom: 0;
      }
    }
  }
`;
exports.IconWrapper = styled_1.styled.div `
  height: 20px;

  color: inherit;

  & .${SvgIcon_1.svgIconClassnames.root} {
    font-size: 20px;

    ${({ theme }) => theme.breakpoints.down('sm')} {
      font-size: 24px;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 24px;
  }
`;
exports.Content = styled_1.styled.div `
  display: grid;
  grid-column: 1 / -1;
  grid-gap: ${({ theme }) => theme.microSpacing(1, 4)};
  grid-template-columns: 20px 1fr 32px;
  grid-template-rows: minmax(20px, auto);
  align-items: unset;

`;
exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
  grid-column: 2 / -1;
  grid-row: 1;

  padding: 0;

  .${constants_1.alertClassnames.hasTitle} & {
    grid-row: 2;
  }
`;
exports.Title = (0, styled_1.styled)(Typography_1.Typography) `
  grid-column: 2 / -1;
`;
