"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledSkeleton = exports.BackButton = exports.TitleWrapper = void 0;
const IconButton_1 = require("../../IconButton");
const Skeleton_1 = require("../../Skeleton");
const styled_1 = require("../../styled");
const Typography_1 = require("../../Typography");
const getGridRow = (hasDescription, hasBreadcrumbs) => {
    if (!hasDescription && !hasBreadcrumbs) {
        return '1 / 4';
    }
    if (!hasDescription) {
        return '2 / 4';
    }
    if (!hasBreadcrumbs) {
        return '1 / 3';
    }
    return '2';
};
exports.TitleWrapper = (0, styled_1.styled)(Typography_1.Typography, {
    shouldForwardProp: (prop) => !['$hasDescription', '$hasBreadcrumbs'].includes(prop),
}) `
  overflow: hidden;
  grid-column: 2;
  grid-row: ${({ $hasDescription, $hasBreadcrumbs }) => getGridRow($hasDescription, $hasBreadcrumbs)};
  align-self: center;

  margin-right: ${({ theme }) => theme.spacing(3)};

  line-height: ${({ theme }) => theme.typography.h2.lineHeight};
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    font-size: ${({ theme }) => theme.typography.h5.fontSize};
    line-height: ${({ theme }) => theme.typography.h5.lineHeight};
    white-space: nowrap;
  }
`;
exports.BackButton = (0, styled_1.styled)(IconButton_1.IconButton) `
  grid-column: 1;
  grid-row: 1 / 4;

  margin-right: ${({ theme }) => theme.spacing(3)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-right: ${({ theme }) => theme.spacing(1)};
    
    border: unset;
  }
`;
exports.StyledSkeleton = (0, styled_1.styled)(Skeleton_1.Skeleton) `
  grid-column: 2;
  grid-row: 2;

  margin: ${({ theme }) => theme.spacing(1, 0)};
`;
