_c-modal.scss

/* ==================================
   #MODAL
   ================================== */

/* Variables
   ========================================================================== */

$au-modal-z-index: 9999 !default;
$au-modal-backdrop-z-index: $au-modal-z-index !default;

@if $au-modal-z-index != $au-modal-backdrop-z-index {
  @warn "DEPRECATED $au-modal-backdrop-z-index. This property has been deprecated and $au-modal-z-index and $au-modal-backdrop-z-index have different values. This will result in unexpected behavior when showing multiple modals.";
}

/* Component
  ========================================================================== */

// Disable scrolling when a modal is opened
.au-c-modal-open {
  overflow: hidden;
}

// Modal backdrop
.au-c-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($au-gray-1000, 0.4);
  z-index: $au-modal-backdrop-z-index;
  display: none;

  &.is-visible {
    display: block;
  }
}

// Modal Dialog base styling
.au-c-modal {
  background: var(--au-white);
  margin: auto;
  height: auto;
  max-height: calc(100% - #{$au-unit});
  width: calc(100% - #{$au-unit});
  max-width: 760px;
  opacity: 1;
  overflow: auto;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  right: $au-unit-small;
  left: $au-unit-small;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  visibility: visible;
  border-radius: var(--au-radius);
  z-index: $au-modal-z-index;
  box-shadow:
    0 1px 3px rgba($au-gray-1000, 0.1),
    0 4px 20px rgba($au-gray-1000, 0.035),
    0 1px 1px rgba($au-gray-1000, 0.025);
  transition: var(--au-transition);
  display: none;

  &:focus {
    outline: 0 !important;
  }

  &.is-visible {
    display: flex;
  }
}

.au-c-modal--overflow {
  overflow: visible;
}

.au-c-modal--large {
  max-width: calc(100% - #{$au-unit-huge});
  max-height: calc(100% - #{$au-unit-huge});
  width: calc(100% - #{$au-unit-huge});
  height: calc(100% - #{$au-unit-huge});
  left: $au-unit-small;
}

.au-c-modal--fullscreen {
  max-width: calc(100% - #{$au-unit-small});
  max-height: calc(100% - #{$au-unit-small});
  width: calc(100% - #{$au-unit-small});
  height: calc(100% - #{$au-unit-small});
  left: $au-unit-tiny;
}

.au-c-modal__header {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $au-unit-small;
  border-bottom: 1px solid var(--au-gray-300);

  @include mq(medium) {
    padding: $au-unit;
  }
}

.au-c-modal__title {
  @include au-font-size(var(--au-h3-small));
  font-family: var(--au-font);
  font-weight: var(--au-medium);

  &:focus {
    outline: 0;
  }

  @include mq(medium) {
    @include au-font-size(var(--au-h3));
  }
}

.au-c-modal__close {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  border-radius: var(--au-radius);
  padding: 0;
  text-align: center;
  color: var(--au-gray-700);
  transition: color var(--au-transition);

  &:hover,
  &:focus {
    color: var(--au-gray-600);
  }

  &:focus {
    outline: 0;
  }

  &:focus-visible {
    outline: var(--au-outline);
    outline-offset: var(--au-outline-offset);
  }

  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:focus-visible,
  &.is-disabled:active {
    color: var(--au-gray-300);
    cursor: not-allowed;
  }
}

.au-c-modal__body {
  flex-grow: 1;
  position: relative;
  height: calc(100% - #{$au-unit-large + $au-unit-small});
  background-color: var(--au-white);
  overflow: auto;
  padding: $au-unit-small;

  &:focus {
    outline: 0;
  }

  .au-c-modal--flush & {
    padding: 0;
  }

  .au-c-modal--overflow & {
    overflow: visible;
  }

  .au-c-modal--overflow &:last-child {
    border-bottom-left-radius: var(--au-radius);
    border-bottom-right-radius: var(--au-radius);
  }

  @include mq(medium) {
    padding: $au-unit;
  }
}

.au-c-modal__footer {
  padding: $au-unit-small;
  border-top: 1px solid var(--au-gray-300);

  .au-c-modal--overflow &:last-child {
    border-bottom-left-radius: var(--au-radius);
    border-bottom-right-radius: var(--au-radius);
  }

  @include mq(medium) {
    padding: $au-unit;
  }
}