.signup {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-inline: var(--inline-space-double);
  width: 100%;

  .signup__title {
    font-size: var(--font-x-large);
    font-weight: var(--font-weight-semi-bold);
    margin-block-start: var(--block-space);
  }

  .signup__form {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
    min-width: 0;
    width: 100%;
  }

  .signup__submit {
    align-self: center;
  }

  .signup__signin {
    text-align: center;
  }
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  min-width: 0;
  width: 100%;

  label {
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-medium);
  }

  input {
    border-radius: var(--radius-small);
    border: 1px solid black;
    display: flex;
    padding: 8px 15px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  :popover-open {
    position-anchor: auto;
    position-area: bottom right;
    margin-bottom: var(--block-space-half);
    width: max-content;
    max-width: calc(100vw - var(--inline-space-double));
    border: 1px solid black;
    border-radius: var(--radius-small);
  }

  input:focus {
    outline: 2px solid oklch(var(--lch-blue-light) / 50%);
  }

  input[aria-invalid="true"] {
    border-color: var(--color-red-medium);
    outline: 2px solid var(--color-red-medium);
  }

  &:has(.input-group__icon-button) {
    .input-group__control {
      display: block;
      min-width: 0;
      position: relative;
      width: 100%;
    }

    .input-group__icon-button {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      margin-right: var(--inline-space);
      border: 0;
      background: transparent;
      padding: var(--block-space-half);
      line-height: 0;

      &:focus-visible {
        outline: 2px solid oklch(var(--lch-blue-light) / 50%);
        border-radius: var(--radius-small);
      }
    }
  }

  .input-group__error {
    color: var(--color-red-medium);

    [data-error-message] {
      display: block;
    }
  }
}