/* Entry color button styles */

button.colored {
  border-radius: 25px;
  --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
}

image.colored {
  border-radius: 32px;
  background: var(--accent-bg-color);
  color: var(--accent-fg-color);
}

.white {
  --accent-bg-color: color-mix(in srgb, currentColor 15%, transparent);
  --accent-fg-color: inherit;
}

.blue {
  --accent-bg-color: var(--blue-4);
  --accent-fg-color: white;
}

.green {
  --accent-bg-color: var(--green-4);
  --accent-fg-color: white;
}

.yellow {
  --accent-bg-color: var(--yellow-4);
  --accent-fg-color: rgb(0 0 0 / 80%);
}

.orange {
  --accent-bg-color: var(--orange-4);
  --accent-fg-color: white;
}

.red {
  --accent-bg-color: var(--red-4);
  --accent-fg-color: white;
}

.purple {
  --accent-bg-color: var(--purple-4);
  --accent-fg-color: white;
}

.brown {
  --accent-bg-color: var(--brown-4);
  --accent-fg-color: white;
}

/* Password strength level bar styles */

levelbar block.insecure, levelbar block.low, levelbar block.high, levelbar block.full {
  background-color: var(--red-2);
}

levelbar block.weak {
  background-color: var(--orange-2);
}

levelbar block.medium {
  background-color: var(--yellow-2);
}

levelbar block.strong {
  background-color: var(--green-2);
}

levelbar block.secure {
  background-color: var(--green-4);
}

toolbarview scrolledwindow.card undershoot.top,
toolbarview scrolledwindow.card undershoot.bottom {
  box-shadow: none;
  background: none;
}

textview {
  padding: 6px;
}

.italic-subtitle label.subtitle, .italic-title label.title {
  font-style: italic;
}

.strikethrough label.subtitle, .strikethrough label.title {
  text-decoration: line-through;
}

.otp-action-row label.title {
  font-size: 24px;
}

.icon-flowbox flowboxchild {
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.icon-flowbox flowboxchild:hover {
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.icon-flowbox flowboxchild:active {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.icon-flowbox flowboxchild:selected {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.icon-flowbox flowboxchild:selected:active {
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.icon-flowbox flowboxchild:selected:hover {
  background: color-mix(in srgb, currentColor 19%, transparent);
}

.tag {
  padding-left: 8px;
  border-radius: 999px;
  background-color: var(--accent-bg-color);
  color: var(--accent-fg-color);
}

.tag label {
  font-weight: bold;
}

.tag button {
  min-width: 24px;
  min-height: 24px;
  margin: 3px;
}

/* Fingerprint */
.fingerprint-img {
  transition-property: color;
  transition-duration: 250ms;
  color: var(--view-fg-color);
}

.fingerprint-img.success {
  transition-property: color;
  transition-duration: 250ms;
  color: var(--success-color);
}

@keyframes wiggle {
  /* Unfortunately we can't use translation or xalign, so here's the workaround */
  0% { padding-left: 0; padding-right: 0; }
  10% { padding-left: 0; padding-right: 2px; }
  20% { padding-left: 4px; padding-right: 0; }
  30% { padding-left: 0; padding-right: 8px; }
  40% { padding-left: 8px; padding-right: 0; }
  50% { padding-left: 0; padding-right: 8px; }
  60% { padding-left: 8px; padding-right: 0; }
  70% { padding-left: 0; padding-right: 8px; }
  80% { padding-left: 4px; padding-right: 0; }
  90% { padding-left: 0; padding-right: 2px; }
  100% { padding-left: 0; padding-right: 0; }
}

.fingerprint-img.retry {
  animation: wiggle;
  animation-duration: 850ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

@keyframes warning-wiggle {
  /* Unfortunately we can't use translation or xalign, so here's the workaround */
  0% { padding-left: 0; padding-right: 0; color: var(--view-fg-color); }
  10% { padding-left: 0; padding-right: 2px; }
  20% { padding-left: 4px; padding-right: 0; }
  30% { padding-left: 0; padding-right: 8px; color: var(--warning-color); }
  40% { padding-left: 8px; padding-right: 0; }
  50% { padding-left: 0; padding-right: 8px; }
  60% { padding-left: 8px; padding-right: 0; }
  70% { padding-left: 0; padding-right: 8px; color: var(--warning-color); }
  80% { padding-left: 4px; padding-right: 0; }
  90% { padding-left: 0; padding-right: 2px; }
  100% { padding-left: 0; padding-right: 0; color: var(--view-fg-color); }
}

.fingerprint-img.warning {
  animation: warning-wiggle;
  animation-duration: 850ms;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
}

.fingerprint-img.error {
  transition-property: color;
  transition-duration: 250ms;
  color: var(--error-color);
}

