.d-modal.login-modal,
.d-modal.create-account {
  .d-modal {
    &__container {
      width: 100%;
    }
    &__body {
      flex-direction: column;
      gap: unset;
      padding-inline: 0.5rem;
    }
    &__footer {
      border-top: 1px solid var(--primary-low);
      padding: 1rem;
      font-size: var(--font-down-1);
    }
  }

  .close {
    font-size: var(--font-up-3);
  }

  .login-welcome-header {
    padding: 1rem;
  }

  .login-right-side {
    padding: 1rem 0 0;
    background: unset;
  }

  .login-or-separator {
    border-top: 1px solid var(--primary-low);
    position: relative;
    margin-block: 1rem;

    span {
      transform: translate(-50%, -50%);
      position: absolute;
      left: 50%;
      top: 50%;
      background: var(--secondary);
      padding-inline: 0.5rem;
      color: var(--primary-medium);
      font-size: var(--font-down-1-rem);
      text-transform: uppercase;
    }
  }

  #login-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 1rem;
    gap: 0.25em;
    margin-bottom: 1rem;

    .btn {
      margin: 0;
      padding-block: 0.65rem;
      border: 1px solid var(--primary-low);
      flex: 1 1 calc(50% - 0.25em);
      font-size: var(--font-down-1);
      white-space: nowrap;
      &:last-child {
        margin-right: auto;
      }
    }
  }

  #login-form,
  .login-form {
    margin: 0;
    padding: 1rem;

    .input-group {
      input {
        height: 2.5em;
        margin-bottom: 0.25em;
      }
      margin-bottom: 1em;
      .user-field:not(.dropdown) label.alt-placeholder {
        top: 8px;
      }
      input:focus + label,
      input.value-entered + label.alt-placeholder {
        top: -10px;
      }
      input.alt-placeholder:invalid {
        color: var(--primary);
      }
      label.more-info {
        color: var(--primary-medium);
      }
    }
  }
  .caps-lock-warning {
    display: none;
  }
}

.d-modal.create-account {
  .d-modal__footer-buttons {
    flex-direction: row;
    gap: 8px;
    button {
      width: auto;
    }
  }

  .login-welcome-header {
    padding-bottom: 0.25rem;
  }

  .signup-progress-bar {
    display: none;
  }
}