@use '../dialog-encryption-common' as *;
@use '../../../../styles/_globals.scss' as *;

// Shared classes
.warning-box {
  @include dialog-warning-box;
}

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

.note {
  @include dialog-note-multiline;
}

.note-warn {
  @include dialog-note-warn;
}

// Component-specific styles
.state-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2);
  margin-bottom: var(--s2);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--card-border-radius);

  .arrow-icon {
    color: var(--c-dark-40);
  }

  @include darkTheme {
    background: var(--c-light-05);

    .arrow-icon {
      color: var(--c-light-40);
    }
  }
}

.state-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-half);
  text-align: center;

  .state-label {
    font-size: 12px;
    color: var(--c-dark-60);

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

  .state-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;

    mat-icon {
      font-size: 20px;
      width: 20px;
      height: 20px;
    }
  }
}
