:host {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.customer-login {
  box-sizing: border-box;
  font-family: var(--sc-input-font-family);
  font-weight: var(--sc-input-font-weight);
  letter-spacing: var(--sc-input-letter-spacing);
  background-color: var(--sc-input-background-color);
  border: solid 1px var(--sc-input-border-color, var(--sc-input-border));
  vertical-align: middle;
  box-shadow: var(--sc-input-box-shadow);
  transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;
  border-radius: var(--sc-input-border-radius-medium);
  font-size: var(--sc-font-size-small);
  animation: open 0.5s ease-in-out;
}
.customer-login a {
  color: var(--sc-color-primary-500);
}

.customer-code {
  padding: var(--sc-input-spacing-medium);
}
.customer-code__sent-info {
  display: flex;
  align-items: center;
  gap: var(--sc-spacing-small);
  font-size: var(--sc-font-size-small);
  color: var(--sc-input-help-text-color);
  margin-bottom: var(--sc-spacing-x-small);
}
.customer-code__mail-icon {
  font-size: 1em;
  flex-shrink: 0;
}
.customer-code__sent-email {
  font-weight: var(--sc-font-weight-semibold);
  color: var(--sc-input-label-color);
}
.customer-code__change-link {
  margin-left: auto;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--sc-font-size-small);
}
.customer-code__change-link:hover {
  text-decoration: underline;
}
.customer-code__error {
  color: var(--sc-color-danger-500, red);
  font-size: var(--sc-font-size-x-small);
  margin: 0;
}
.customer-code__verifying {
  display: flex;
  align-items: center;
  gap: var(--sc-spacing-small);
  color: var(--sc-input-help-text-color);
  font-size: var(--sc-font-size-small);
  margin-bottom: var(--sc-spacing-small);
}
.customer-code__expired {
  color: var(--sc-color-danger-500, red);
  font-size: var(--sc-font-size-x-small);
  margin: 0 0 var(--sc-spacing-small) 0;
}
.customer-code__expired a {
  color: var(--sc-color-primary-500);
  text-decoration: none;
  cursor: pointer;
}
.customer-code__expired a:hover {
  text-decoration: underline;
}
.customer-code__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sc-spacing-small);
}
.customer-code__footer-left {
  display: flex;
  align-items: center;
}
.customer-code__footer-right {
  display: flex;
  align-items: center;
}
.customer-code__resend-timer {
  color: var(--sc-input-help-text-color);
  font-size: var(--sc-font-size-x-small);
}
.customer-code__resend-link {
  font-size: var(--sc-font-size-x-small);
  text-decoration: none;
  cursor: pointer;
}
.customer-code__resend-link:hover {
  text-decoration: underline;
}
.customer-code__mode-link {
  display: flex;
  align-items: center;
  gap: var(--sc-spacing-xx-small);
  font-size: var(--sc-font-size-x-small);
  text-decoration: none;
  cursor: pointer;
}
.customer-code__mode-link:hover {
  text-decoration: underline;
}

.customer-password {
  padding: var(--sc-input-spacing-medium);
}
.customer-password__error {
  color: var(--sc-color-danger-500, red);
  font-size: var(--sc-font-size-x-small);
  margin: var(--sc-spacing-small) 0 0 0;
}