"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledButton = exports.StyledAlert = void 0;
const Alert_1 = require("../Alert");
const Button_1 = require("../Button");
const SvgIcon_1 = require("../SvgIcon");
const styled_1 = require("../styled");
const constants_1 = require("./constants");
exports.StyledAlert = (0, styled_1.styled)(Alert_1.Alert) `
  &.${Alert_1.alertClassnames.root}.${constants_1.dashboardAlertClassnames.root}.${constants_1.dashboardAlertClassnames.root} {
    grid-template-columns: 24px 1fr 32px;

    margin-bottom: ${({ theme }) => theme.spacing(4)};
    padding: ${({ theme }) => theme.spacing(3, 4)};


    .${Alert_1.alertClassnames.contentWrapper} {
      grid-template-columns: 24px 1fr 32px;
      grid-template-rows: minmax(32px, auto);
      align-items: center;

      ${({ theme }) => theme.breakpoints.down('sm')} {
        align-items: flex-start;
      }
    }

    .${Alert_1.alertClassnames.iconWrapper} {
      height: 24px;
      padding: 0;

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

    .${Alert_1.alertClassnames.content} {
      padding: 0;
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      margin: ${({ theme }) => theme.spacing(3, 4, 1)};
    }
  }
`;
exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
  height: 20px;
  padding-left: 0;

  font-weight: ${({ theme }) => theme.typography.body1.fontWeight};
  line-height: ${({ theme }) => theme.typography.body1.lineHeight};
  vertical-align: baseline;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 20px;
  }
`;
