@import "./form-controls.css";
@import "./phone-field.css";

.lockerverse-payment,
.lockerverse-signup {
  --lockerverse-form-accent: var(--lockerverse-accent);
  --lockerverse-form-border: var(--lockerverse-border);
  --lockerverse-form-control: var(--lockerverse-control);
  --lockerverse-form-muted: var(--lockerverse-muted);
  --lockerverse-form-placeholder: var(--lockerverse-placeholder);
  --lockerverse-form-radius: var(--lockerverse-radius);
  --lockerverse-form-subtle: var(--lockerverse-subtle);
  --lockerverse-form-text: var(--lockerverse-text);
}

:is(.lockerverse-payment, .lockerverse-signup)
  label:not(.lockerverse-payment__check-row),
:is(.lockerverse-payment, .lockerverse-signup) .lockerverse-payment__field,
:is(.lockerverse-payment, .lockerverse-signup) fieldset {
  display: grid;
  gap: 8px;
}

:is(.lockerverse-payment, .lockerverse-signup) label > span,
:is(.lockerverse-payment, .lockerverse-signup)
  .lockerverse-payment__field
  > span,
:is(.lockerverse-payment, .lockerverse-signup) legend {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--lockerverse-form-text) 82%, transparent);
}

:is(.lockerverse-payment, .lockerverse-signup) fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

:is(.lockerverse-payment, .lockerverse-signup)
  input:not([type="checkbox"]):not([type="radio"]):where(
    :not(.lockerverse-form__control):not(.lockerverse-form__phone input)
  ),
:is(.lockerverse-payment, .lockerverse-signup)
  select:where(:not(.lockerverse-form__control)),
:is(.lockerverse-payment, .lockerverse-signup) textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lockerverse-form-text);
  appearance: none;
  outline: none;
  background-color: var(--lockerverse-form-control);
  border: 1px solid var(--lockerverse-form-border);
  border-radius: var(--lockerverse-form-radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

:is(.lockerverse-payment, .lockerverse-signup)
  select:where(:not(.lockerverse-form__control)) {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:
    5px 5px,
    5px 5px;
}

:is(.lockerverse-payment, .lockerverse-signup) textarea {
  min-height: 112px;
  padding-top: 12px;
  resize: vertical;
}

:is(.lockerverse-payment, .lockerverse-signup) input::placeholder,
:is(.lockerverse-payment, .lockerverse-signup) textarea::placeholder {
  color: var(--lockerverse-form-placeholder);
  opacity: 1;
}

:is(.lockerverse-payment, .lockerverse-signup)
  input:not([type="checkbox"]):not([type="radio"]):where(
    :not(.lockerverse-form__control):not(.lockerverse-form__phone input)
  ):focus,
:is(.lockerverse-payment, .lockerverse-signup)
  select:where(:not(.lockerverse-form__control)):focus,
:is(.lockerverse-payment, .lockerverse-signup) textarea:focus,
:is(.lockerverse-payment, .lockerverse-signup) button:focus {
  outline: none;
  border-color: var(--lockerverse-form-accent);
}

:is(.lockerverse-payment, .lockerverse-signup)
  input:not([type="checkbox"]):not([type="radio"]):where(
    :not(.lockerverse-form__control):not(.lockerverse-form__phone input)
  ):focus,
:is(.lockerverse-payment, .lockerverse-signup)
  select:where(:not(.lockerverse-form__control)):focus,
:is(.lockerverse-payment, .lockerverse-signup) textarea:focus {
  box-shadow: 0 0 0 1px var(--lockerverse-form-accent);
}

:is(.lockerverse-payment, .lockerverse-signup)
  input:not([type="checkbox"]):not([type="radio"]):where(
    :not(.lockerverse-form__control):not(.lockerverse-form__phone input)
  ):focus-visible,
:is(.lockerverse-payment, .lockerverse-signup)
  select:where(:not(.lockerverse-form__control)):focus-visible,
:is(.lockerverse-payment, .lockerverse-signup) textarea:focus-visible,
:is(.lockerverse-payment, .lockerverse-signup) button:focus-visible {
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--lockerverse-form-accent) 24%, transparent);
}

.lockerverse-form-skeleton__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.lockerverse-form-skeleton {
  display: grid;
  gap: 16px;
}

.lockerverse-form-skeleton__branding {
  display: flex;
  gap: 14px;
  align-items: center;
}

.lockerverse-form-skeleton__avatar,
.lockerverse-form-skeleton__community,
.lockerverse-form-skeleton__label,
.lockerverse-form-skeleton__input,
.lockerverse-form-skeleton__section-label,
.lockerverse-form-skeleton__section-full,
.lockerverse-form-skeleton__section-half,
.lockerverse-form-skeleton__check-line,
.lockerverse-form-skeleton__button {
  display: block;
  background: color-mix(in srgb, var(--lockerverse-form-text) 8%, transparent);
  animation: lockerverse-form-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.lockerverse-form-skeleton__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--lockerverse-form-radius);
}

.lockerverse-form-skeleton__community {
  width: 176px;
  height: 20px;
  border-radius: 4px;
}

.lockerverse-form-skeleton__fields {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--lockerverse-form-subtle);
}

.lockerverse-form-skeleton__field {
  display: grid;
  gap: 8px;
}

.lockerverse-form-skeleton__label {
  width: 48px;
  height: 16px;
  border-radius: 4px;
}

.lockerverse-form-skeleton__input {
  width: 100%;
  height: 48px;
  background: var(--lockerverse-form-control);
  border: 1px solid var(--lockerverse-form-subtle);
  border-radius: var(--lockerverse-form-radius);
}

.lockerverse-form-skeleton__section {
  padding: 12px;
  background: color-mix(
    in srgb,
    var(--lockerverse-form-text) 2.5%,
    transparent
  );
  border: 1px solid var(--lockerverse-form-subtle);
  border-radius: var(--lockerverse-form-radius);
}

.lockerverse-form-skeleton__section-label {
  width: 144px;
  height: 16px;
  border-radius: 4px;
}

.lockerverse-form-skeleton__section-content {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lockerverse-form-skeleton__section-full,
.lockerverse-form-skeleton__section-half {
  height: 36px;
  border-radius: 6px;
}

.lockerverse-form-skeleton__section-full {
  background: color-mix(in srgb, var(--lockerverse-form-text) 6%, transparent);
}

.lockerverse-form-skeleton__section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lockerverse-form-skeleton__section-half {
  background: color-mix(
    in srgb,
    var(--lockerverse-form-text) 4.5%,
    transparent
  );
}

.lockerverse-form-skeleton__actions {
  display: grid;
  gap: 16px;
  padding: 20px 0 4px;
}

.lockerverse-form-skeleton__check-line {
  width: min(256px, 70%);
  height: 20px;
  border-radius: 4px;
}

.lockerverse-form-skeleton__button {
  width: 100%;
  height: 48px;
  background: color-mix(in srgb, var(--lockerverse-form-text) 12%, transparent);
  border-radius: var(--lockerverse-form-radius);
}

@keyframes lockerverse-form-pulse {
  50% {
    opacity: 0.55;
  }
}