@import 'variables';
@import 'theme-colors';

.modal {
  padding-right: 0 !important;
  cursor: var(--modal-cursor-image), auto !important;

  .modal-dialog {
    .modal-content {
      border: 0;
      cursor: default !important;
      border-radius: $default-radius;
      background-color: var(--modal-body-bg);
      max-height: calc(100% - 18rem) !important;

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $default-modal-padding;
        border-color: var(--default-border-color);
        background-color: var(--modal-header-footer-bg);

        .close {
          padding: 0;
          margin: 0;
          color: var(--default-font-color);

          &:focus {
            outline: none;
          }

          svg {
            width: 32px;
            height: 32px;
            padding: 0.438rem;

            &:hover {
              border-radius: 50%;
              background-color: var(--icon-hover-bg);
            }
          }
        }
      }

      .modal-body {
        padding: $default-modal-padding;
        background-color: var(--modal-body-bg);
      }

      .modal-footer {
        padding: $default-modal-padding;
        border-color: var(--default-border-color);
        background-color: var(--modal-header-footer-bg);
      }

      @media (min-width: 576px) {
        min-height: 325px !important;
      }
    }

    &.modal-sm {
      &.modal-dialog {
        max-width: 380px;

        .modal-content {
          min-height: auto !important;
        }
      }
    }

    &.modal-default {
      @media (min-width: 576px) {
        max-width: 620px;
      }
    }

    &.modal-fullwidth {
      max-width: 100%;
    }

    &.modal-dialog-top {
      max-height: 100vh;
      margin: 0 auto !important;

      .modal-content {
        max-height: 100vh;
      }
    }
  }

  &.modal-fullscreen {
    .modal-dialog {
      margin: 0 !important;
      padding: 0 !important;
      max-width: 100% !important;
      max-height: 100% !important;
      min-height: 100% !important;

      .modal-content {
        display: flex;
        border-radius: 0;
        position: relative;
        pointer-events: auto;
        flex-direction: column;
        min-width: 100% !important;
        min-height: 100% !important;
        background-clip: padding-box;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
      }
    }
  }
}

