/* Copyright 2026 New Vector Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

:root {
  --brand-color-accent: #d51c0b;
  --brand-input-background: #f4f4f4;
  --brand-input-background-autofill: #eef3fa;
  --brand-link-muted: #696b7799;
  --brand-link-muted-hover: #55565e;
  --brand-link-muted-active: #292a2d;
  --brand-primary-gradient: linear-gradient(
    45deg,
    #c20000 6.43%,
    #c30300 19.99%,
    #c60e00 32.57%,
    #cb2000 45.16%,
    #d33900 56.78%,
    #dd5a00 67.43%,
    #e98200 79.04%,
    #f7b000 89.69%,
    #ffc800 94.53%
  );
}

.cpd-text-control {
  background: var(--brand-input-background);
  border-color: transparent;
}

.cpd-text-control:-webkit-autofill,
.cpd-text-control:-webkit-autofill:hover,
.cpd-text-control:-webkit-autofill:focus,
.cpd-text-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--cpd-color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
  box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
  background-color: var(--brand-input-background-autofill);
  border-color: transparent;
  transition: background-color 99999s ease-out 0s;
}

.cpd-text-control:-webkit-autofill:not(:hover):not(:focus):not(:active) {
  border-color: transparent;
}

@media (hover) {
  .cpd-text-control:hover {
    border-color: var(--brand-color-accent);
  }
}

.cpd-text-control:active {
  border-color: var(--brand-color-accent);
}

.cpd-text-control:focus,
.cpd-text-control:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand-color-accent) 20%, white);
  outline-offset: 0;
  border-color: var(--brand-color-accent);
}

.cpd-button[data-kind="primary"]:not(.destructive) {
  background: var(--brand-primary-gradient);
  border-width: 0;
}

@media (hover) {
  .cpd-button[data-kind="primary"]:not(.destructive):hover {
    filter: brightness(1.03);
  }
}

.cpd-button[data-kind="primary"]:not(.destructive):active,
.cpd-button[data-kind="primary"]:not(.destructive)[aria-expanded="true"] {
  filter: brightness(0.96);
}

.cpd-button[data-kind="primary"]:not(.destructive)[disabled] {
  filter: none;
}

.login-page .cpd-link[data-kind="primary"] {
  color: var(--brand-link-muted);
}

@media (hover) {
  .login-page .cpd-link[data-kind="primary"]:hover {
    color: var(--brand-link-muted-hover);
    background: transparent;
  }
}

.login-page .cpd-link[data-kind="primary"]:active {
  color: var(--brand-link-muted-active);
  background: transparent;
}

[data-disable-submit-until-valid]
  .cpd-button[type="submit"][data-kind="primary"][disabled] {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.55;
}
