@import "./properties.css";
@import "../z-index.css";

.modal,
.modal * {
  box-sizing: border-box;
}

.modal {
  background: var(--modal-frame-background-color);
  border-radius: var(--modal-border-radius);
  border: var(--modal-frame-border);
  box-shadow: var(--modal-box-shadow);
  height: auto;
  outline: none;
  overflow-y: auto;
  overflow-x: unset;
  position: relative;
  transform: var(--modal-content-transform);
  max-width: 98%;
  max-height: 96%;

  & .title,
  & .content,
  & .actions {
    padding: var(--modal-child-padding);

    &:first-child {
      padding: var(--modal-child-first-child-padding);
    }
  }
}

.modalAfterOpen {
  transition: var(--modal-content-transition);
  transform: var(--modal-content-transform-none);
}

.modalBeforeClose {
  transform: var(--modal-content-transform);
}

.overlay {
  align-items: center;
  background: var(--modal-overlay-background);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: var(--modal-overlay-opacity-none);
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--modal-overlay-z-index);
}

.overlayAfterOpen {
  opacity: var(--modal-overlay-opacity);
  will-change: opacity;
  transition: var(--modal-overlay-transition);
}

.overlayBeforeClose {
  opacity: var(--modal-overlay-opacity-none);
}

.centerAlign {
  text-align: center;
}

.endAlign {
  text-align: end;
}

.startAlign {
  text-align: start;
}

.section {
  background-color: var(--modal-section-background-color);
  border-radius: var(--modal-border-radius);
  width: 100%;
}

.title {
  align-items: center;
  color: var(--modal-title-color);
  display: flex;
  line-height: 100%;
  padding-top: var(--modal-padding);
}

.title > h2 {
  color: var(--modal-title-color);
  flex: 1;
  font-size: var(--modal-title-font-size);
  font-weight: var(--modal-title-font-weight);
  margin: var(--modal-title-margin);
  text-transform: var(--modal-title-text-transform);
}

.icon {
  align-items: center;
  display: flex;
  margin-right: var(--modal-title-icon-spacing);
}

.actions > *:not(:first-child) {
  margin-left: var(--modal-actions-margin);
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.modal hr {
  display: block;
  border-color: var(--modal-divider-border-color);
  border-style: var(--modal-divider-border-style);
  border-width: var(--modal-divider-border-width);
  margin: var(--modal-divider-margin);
}

.modal fieldset {
  border: 0;
  display: inherit;
  margin: 0;
  padding: 0;
}

.mobile {
  width: var(--modal-inner-mobile-width);
  max-width: var(--modal-inner-default-width);
}

.default {
  width: var(--modal-inner-default-width);
}

.huge {
  width: var(--modal-inner-huge-width);
}

.small {
  width: var(--modal-inner-small-width);
}

.top {
  align-self: flex-start;
  margin-top: var(--modal-margin);
}

.center {
  align-self: center;
}

.bottom {
  align-self: flex-end;
  margin-bottom: var(--modal-margin);
}