:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: flex;
  min-width: 330px;
  max-width: 380px;
  min-height: 23rem;
}

.auth {
  border: 1px solid var(--sl-color-gray-200);
  border-radius: var(--sl-border-radius-x-large);
  flex: 1;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--sl-color-white);
  box-shadow: var(--sl-shadow-x-large);
}

.container {
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  position: absolute;
  contain: layout size style;
}

.auth__signin__button-email,
.auth__signin__button-passkey {
  width: 100%;
}

.auth__signin-passcode,
.auth__terms,
.auth__otp {
  display: grid;
  gap: calc(var(--sl-spacing-x-large) * var(--sl-density));
}

.auth__final {
  display: flex;
  justify-content: center;
  flex: 1;
  margin-top: var(--sl-spacing-xxx-large);
  font-size: var(--sl-font-size-xxx-large);
}

.auth__signin-passkey sl-divider {
  margin: var(--sl-spacing-small) 0px;
}

.view {
  padding: calc(var(--sl-spacing-xx-large) * var(--sl-density));
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.view--hidden {
  display: none;
}

.action--left {
  margin-left: calc(-1 * var(--sl-spacing-x-small) * var(--sl-density));
}

.action--right {
  margin-right: calc(-1 * var(--sl-spacing-x-small) * var(--sl-density));
}

.auth__terms__footer,
.auth__otp__footer {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--sl-spacing-x-small) * var(--sl-density));
}