src/components/formPopup/formPopup.scss
@import '../../common/styles//functions.scss';

.form-popup {
  .form-notification-banner {
    padding: 16px;

    &.error {
      background-color: #f8d7da;
      color: #dc3545;
    }

    .banner-content {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .fa {
      margin-right: 4px;
    }
  }

  .popup-content {
    width: 90%;
    max-width: 740px;
    
    section {
      padding: 20px;
    }

    .app-loader {
      position: relative;
      margin: 50px auto;
    }

    .form-row {
      label {
        width: 140px;

        @media screen and (max-width: 800px) {
          width: 100px;
        }

        @media screen and (max-width: 620px) {
          width: 100%;
          margin-bottom: 5px;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    .buttons-wrapper {
      padding: 0;

      .button {
        font-size: 16px;
        padding: 7px 15px;
        text-transform: uppercase;
        font-weight: 400;
        background-color: v(submitButtonBackground, "green");
        color: v(submitButtonText, "#fff");
        position: relative;

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.2);
          opacity: 0;
          transition: opacity 0.2s ease;
        }

        &:hover {
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }
}