@layer components {
/* Preferences */

.preferences__section {
  margin-bottom: var(--block-space);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--color-canvas);
}

.preferences__section--warning {
  margin-top: calc(var(--block-space) * 3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--color-canvas);
}

.preferences__section-header {
  padding: var(--block-space);
  background: var(--color-ink-lightest);
  border-bottom: 1px solid var(--color-ink-lighter);
  border-radius: var(--radius) var(--radius) 0 0;
}

.preferences__section-header--warning {
  padding: var(--block-space);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border-bottom: 1px solid var(--color-ink-lighter);
  border-radius: var(--radius) var(--radius) 0 0;
}

.preferences__section-title {
  margin-bottom: 0;
}

.preferences__section-body {
  padding: var(--block-space);
}

.preferences__description {
  color: var(--color-ink-medium);
  font-size: var(--text-small);
  margin-bottom: var(--block-space);
}

.preferences__field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--block-space);

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

.preferences__field-info {
  display: flex;
  align-items: center;
  gap: var(--inline-space-half);
}

.preferences__field-label {
  font-weight: 600;
}

.preferences__field-actions {
  display: flex;
  gap: var(--inline-space-half);
  flex-shrink: 0;
}

.preferences__mind {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--block-space);
  border: 1px solid var(--color-ink-lighter);
  border-radius: var(--radius);
  margin-bottom: var(--block-space);

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

.preferences__mind-info {
  display: flex;
  align-items: center;
}
}