/* Subscriptions
/* ------------------------------------------------------------------------ */
:root {
  --settings-subscription-background: linear-gradient(to bottom, var(--color-canvas), oklch(var(--lch-violet-lighter)));
  --settings-subscription-color: oklch(var(--lch-violet-medium));
  --settings-subscription-text-color: oklch(var(--lch-violet-dark));

  .settings-subscription__button {
    --btn-background: var(--settings-subscription-color);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-canvas);
    --focus-ring-color: var(--color-ink);
  }

  .settings-subscription__divider {
    --divider-color: currentColor;

    color: var(--settings-subscription-color);
    margin-block-start: calc(var(--block-space-half) * -1);
  }

  .settings-subscription__footer {
    color: var(--settings-subscription-text-color);

    &::before {
      border-block-start: 1px solid var(--settings-subscription-text-color);
      content: "";
      display: block;
      inline-size: 8ch;
      margin: 0 auto 1ch;
    }
  }

  .settings-subscription__link {
    color: var(--settings-subscription-text-color);
  }

  .settings-subscription__panel {
    background: var(--settings-subscription-background);
  }
}