.iron-checkbox-field {
  min-width: 0;
}

.iron-checkbox-title {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--bone);
  font-size: 0.8rem;
  font-weight: 700;
}

.iron-checkbox-field > .iron-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  height: var(--iron-checkbox-height, 3rem);
  min-height: var(--iron-checkbox-height, 3rem);
  margin: 0;
  padding: 0 0.8rem;
  box-sizing: border-box;
  border: 1px solid rgb(from var(--line) r g b / 22%);
  border-radius: 0;
  background: var(--night-2);
  color: var(--bone);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.iron-checkbox input[type="checkbox"],
.iron-inline-checkbox input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.iron-checkbox:hover {
  border-color: rgb(from var(--copper-border) r g b / 75%);
  background: rgb(from var(--copper) r g b / 10%);
}

.iron-checkbox:has(input:checked) {
  border-color: var(--copper-border);
  background: rgb(from var(--copper) r g b / 18%);
}

.iron-checkbox:has(input:focus-visible) {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.iron-checkbox:active {
  transform: scale(0.985);
}

.iron-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--bone);
  cursor: pointer;
}

.iron-inline-checkbox:hover .iron-checkbox-control {
  border-color: var(--copper-border);
}

.iron-inline-checkbox input:focus-visible + .iron-checkbox-control {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.iron-checkbox-control {
  position: relative;
  display: grid;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  place-items: center;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid rgb(from var(--line) r g b / 55%);
  border-radius: 0;
  background: rgb(from var(--white) r g b / 4%);
  color: var(--white);
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

.iron-checkbox-control::after {
  content: "";
  width: 0.35rem;
  height: 0.65rem;
  border: solid currentcolor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translateY(-0.08rem) rotate(45deg) scale(0.7);
  transition:
    opacity 120ms ease,
    transform 160ms ease;
}

.iron-checkbox input:checked + .iron-checkbox-control,
.iron-inline-checkbox input:checked + .iron-checkbox-control {
  border-color: var(--copper-border);
  background: var(--copper);
}

.iron-checkbox input:checked + .iron-checkbox-control::after,
.iron-inline-checkbox input:checked + .iron-checkbox-control::after {
  opacity: 1;
  transform: translateY(-0.08rem) rotate(45deg) scale(1);
}

.iron-checkbox-text {
  margin: 0;
  color: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}

.remember-me-field {
  margin: 1rem 0 1.8rem;
}