@import "../../../../../styles/index.scss";

.notification-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  // background-color: rgba($blackColor, 0.1);
  z-index: 999;
}

.notification-settings-card {
  background: $whiteColor;
  border-radius: $borderRadiusLarge; // 12px
  box-shadow: 0 8px 32px $boxShadowMedium; // rgba(0, 0, 0, 0.12)
  border: 1px solid $disabledSecondaryBorder; // #e5e7eb
  width: 386px;
  z-index: 1000;
  .notification-settings-header {
    padding: 20px 24px 4px 24px;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: $darkColor; // #111827
      line-height: 1.4;
    }
  }

  .notification-settings-content {
    padding: 12px 24px;

    .notification-options {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .notification-option {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        padding: 6px 0;

        input[type="radio"] {
          display: none;
        }

        .radio-custom {
          width: 20px;
          height: 20px;
          border: 2px solid $lightGrayColor; // #d1d5db
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
          transition: all 0.2s ease;

          &::after {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: $primaryColor; // #3b82f6
            opacity: 0;
            transform: scale(0);
            transition: all 0.2s ease;
          }
        }

        input[type="radio"]:checked + .radio-custom {
          border-color: $primaryColor;

          &::after {
            opacity: 1;
            transform: scale(1);
          }
        }

        .option-text {
          font-size: 16px;
          color: $mainFontColor; // #374151
          line-height: 1.5;
          font-weight: 400;
        }

        &:hover .radio-custom {
          border-color: $breadCrumbsDot; // #6b7280
        }

        &:hover input[type="radio"]:checked + .radio-custom {
          border-color: $primaryColor;
        }
      }

      .mentions-checkbox {
        margin-left: 32px;
        margin-top: 4px;
        margin-bottom: 4px;

        .ia-checkbox-container {
          .ia-checkbox-input + .ia-checkbox-label {
            font-size: 14px;
            color: $breadCrumbsDot; // #6b7280
            font-weight: 400;
          }
        }
      }
    }

    .notification-separator {
      height: 1px;
      background-color: $progressBarBg; // #f3f4f6
      margin: 16px 0 20px 0;
    }

    .mute-section {
      .ia-checkbox-container {
        margin-bottom: 12px;

        .ia-checkbox-input + .ia-checkbox-label {
          font-size: 16px;
          color: $mainFontColor; // #374151
          font-weight: 400;
        }
      }

      .mute-description {
        margin-left: 32px;
        margin-top: 8px;
        margin-bottom: 4px;

        p {
          margin: 0 0 8px 0;
          font-size: 14px;
          color: $breadCrumbsDot; // #6b7280
          line-height: 1.5;

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

  .notification-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 12px 20px 24px;
    border-top: 1px solid $progressBarBg; // #f3f4f6
    border-radius: 0 0 $borderRadiusLarge $borderRadiusLarge;

    .ia-styles.ia-btn.ia-btn-link:hover {
      text-decoration: none;
    }

    button {
      min-width: 80px;
      height: 36px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 6px;
      transition: all 0.2s ease;

      &[variant="tertiary"] {
        background-color: transparent;
        border: 1px solid $lightGrayColor; // #d1d5db
        color: $mainFontColor; // #374151

        &:hover {
          background-color: $color-gray-50; // #f9fafb
          border-color: $disabledSecondaryBorder; // #9ca3af (closest)
        }
      }

      &[variant="primary"] {
        background-color: $primaryColor; // #3b82f6
        border: 1px solid $primaryColor;
        color: $whiteColor;

        &:hover {
          background-color: darken($primaryColor, 10%); // #2563eb
          border-color: darken($primaryColor, 10%);
        }
      }
    }
  }
}

// Animation for card entrance
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 10px);
  }
}

// .notification-settings-card {
//   animation: slideInUp 0.2s ease-out;
// }
