.modal {
  &-content {
    .dark & {
      background-color: $dark;
    }
  }
  &-header {
    padding: 2.5rem 3.125rem;
    border: 0;
    .close {
      margin: 0;
      padding: 0;
      width: 3rem;
      height: 3rem;
      font-size: 2rem;
      transition: all .3s ease;
      text-shadow: none;
      line-height: 20px;
      opacity: 1;
      .dark & {
        color: $white;
        &:hover {
          color: $accent;
          opacity: 1;
        }
      }
      &:not(:disabled):not(.disabled) {
        &:hover, &:focus {
          color: $accent;
          opacity: 1;
          transform: rotate(180deg);
        }
      }
    }
  }
  &-body {
    padding: 0rem 3.125rem;
  }
  &-footer {
    padding: 1.5rem 3.125rem 2.5rem;
    border: 0;
    justify-content: flex-start;
  }
  &-lg {
    .modal {
      &-header {
        
        .close {

        }
      }
    }
  }
  &-sm {
    .modal {
      &-header {
        padding: 1.75rem 2.25rem;
        .close {
          width: 2.5rem;
          height: 2.5rem;
          font-size: 1.75rem;
        }
      }
      &-body {
        padding: 0rem 2.25rem;
      }
      &-footer {
        padding: 1rem 2.25rem 2rem;
      }
    }
  }
}