cbsnexora/src/app/home/warning-dialog/warning-dialog.component.scss

/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

$primary: #1a73e8;
$primary-light: #e8f0fe;
$amber: #f9ab00;
$amber-light: #fef7e0;
$gray-50: #f8f9fa;
$gray-100: #f1f3f4;
$gray-200: #e8eaed;
$gray-500: #9aa0a6;
$gray-700: #5f6368;
$gray-900: #202124;
$white: #fff;

.warn-dialog {
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

// Branding
.warn-branding {
  padding: 18px 24px 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  &__logomark {
    width: 24px;
    height: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;

    span {
      border-radius: 2px;

      &:nth-child(1) {
        background: #0d3d78;
      }

      &:nth-child(2) {
        background: #0ea5e9;
      }

      &:nth-child(3) {
        background: #10b981;
      }

      &:nth-child(4) {
        background: rgba(#0d3d78, 0.3);
      }
    }
  }

  &__text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0d3d78;

    em {
      font-style: normal;
      color: #0ea5e9;
    }
  }
}

// Header
.warn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid $gray-200;

  &__icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: $amber-light;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    i {
      font-size: 20px;
      color: $amber;
    }
  }

  &__title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: $gray-900;
    letter-spacing: -0.2px;
    line-height: 1.2;
  }
}

// Body
.warn-body {
  padding: 18px 24px !important;
  overflow: visible !important;
  max-height: none !important;

  &__text {
    font-size: 13.5px;
    line-height: 1.65;
    color: $gray-700;
    margin: 0 0 16px;
  }

  &__meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  &__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: $gray-500;
    background: $gray-50;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid $gray-100;

    i {
      font-size: 12px;
      color: #34a853;
    }
  }
}

// Actions
.warn-actions {
  padding: 12px 24px 18px !important;
  border-top: 1px solid $gray-200;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  &__logos {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  &__logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    opacity: 0.85;
  }

  &__btn {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
    height: 38px !important;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
  }

  &__btn-icon {
    margin-right: 6px;
    font-size: 12px;
  }
}