// Shared styles for encryption-related dialogs
// Used by: dialog-enable-encryption, dialog-change-encryption-password,
//          dialog-import-encryption-warning

@use '../../../styles/_globals.scss' as *;

// ============================================
// ALERT BOXES
// ============================================

// Warning box - orange/amber for destructive actions
@mixin dialog-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s2);
  margin-bottom: var(--s2);
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.3);
  border-radius: var(--card-border-radius);

  mat-icon {
    color: var(--color-warning);
    flex-shrink: 0;
  }

  p {
    margin: 0;
    line-height: 1.5;
  }
}

// Info box - blue for informational messages
@mixin dialog-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s2);
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: var(--card-border-radius);

  mat-icon {
    color: #2196f3;
    flex-shrink: 0;
  }

  p {
    margin: 0 0 var(--s);
    line-height: 1.5;

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

// ============================================
// CONTENT SECTIONS
// ============================================

// Info section with heading and list
@mixin dialog-info-section {
  margin-bottom: var(--s2);

  h3 {
    margin: 0 0 var(--s);
    font-size: 14px;
    font-weight: 500;
  }

  ul {
    margin: 0;
    padding-left: 20px;

    li {
      line-height: 1.6;
    }
  }
}

// Note text with icon (basic variant)
@mixin dialog-note {
  display: flex;
  align-items: center;
  gap: var(--s);
  margin: 0;
  font-size: 13px;
  color: var(--c-dark-60);

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  @include darkTheme {
    color: var(--c-light-60);
  }
}

// Note text with icon (flex-start aligned, with margin)
@mixin dialog-note-multiline {
  display: flex;
  align-items: flex-start;
  gap: var(--s);
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--c-dark-60);

  mat-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
  }

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

  @include darkTheme {
    color: var(--c-light-60);
  }
}

// Note variant with warning background
@mixin dialog-note-warn {
  padding: 12px;
  background: rgba(255, 152, 0, 0.08);
  border-radius: var(--card-border-radius);
  color: var(--c-dark-80);

  mat-icon {
    color: var(--color-warning);
  }

  @include darkTheme {
    background: rgba(255, 152, 0, 0.15);
    color: var(--c-light-90);
  }
}

// ============================================
// UTILITY STYLES
// ============================================

@mixin dialog-spinner-inline {
  display: inline-block;
}

// ============================================
// CONVENIENCE CLASS GENERATORS
// ============================================

// Generate all common dialog classes for enable/disable dialogs
@mixin dialog-encryption-common-classes {
  .warning-box {
    @include dialog-warning-box;
  }

  .info-box {
    @include dialog-info-box;
  }

  .info-section {
    @include dialog-info-section;
  }

  .note {
    @include dialog-note;
  }

  mat-spinner {
    @include dialog-spinner-inline;
  }
}
