@use '../abstracts/variables' as SRC;
@use 'sass:color';

.FullWidthAlert[role='alert'] {
  &.global {
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 2500;
  }
  padding: 14px;
  z-index: 500;
  .gridContainer {
    display: grid;
    grid-template-columns: 50px auto 150px 200px;
    column-gap: 10px;
    align-items: center;
    justify-items: start;
    .iconArea {
      font-size: 20px;
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
      min-width: 50px;
    }
    .messageArea {
      max-width: 700px;
      grid-row: 1 / span 1;
      p {
        margin-bottom: 0px;
      }
    }
    .iconForeground {
      color: white;
    }
    .closeAlert {
      font-size: 29px;
      grid-column: 4 / span 1;
      grid-row: 1 / span 1;
      justify-self: end;
      padding-bottom: 6px;
    }
    @media (min-width: 992px) {
      grid-template-rows: auto;
      .messageArea {
        grid-column: 2 / span 1;
      }
      .secondaryButton {
        grid-column: 3 / span 1;
        grid-row: 1 / span 1;
        justify-self: end;
      }
      .primaryButton {
        grid-column: 4 / span 1;
        grid-row: 1 / span 1;
        justify-self: end;
      }
    }
    @media (max-width: 992px) {
      grid-template-rows: auto 75px;
      .messageArea {
        grid-column: 2 / span 3;
      }
      .secondaryButton {
        grid-column: 4 / span 1;
        grid-row: 2 / span 1;
      }
      .primaryButton {
        grid-column: 2 / span 2;
        grid-row: 2 / span 1;
      }
    }
  }

  .gridContainer.hasCloseButton {
    @media (min-width: 992px) {
      grid-template-columns: 50px auto 150px 200px 50px;
      .closeAlert {
        grid-column: 5 / span 1;
      }
    }
  }

  .gridContainer.noActions {
    grid-template-rows: auto;
    grid-template-columns: 50px auto 50px;
    .closeAlert {
      grid-column: 3 / span 1;
    }
    .messageArea {
      grid-column: 2 / span 1;
      max-width: unset;
    }
  }
}