.form-element {
    width: fit-content;
    overflow: hidden;
}

.form-label {
    padding: $spacing-xsmall;

    display: block;
    font-size: $font-size-small;
    text-shadow: 0 1px 0.5px rgba(#000, 0.2);

    color: $color-on-background;
}

.form-input {
    padding: $spacing-small;

    display: block;

    font-family: $font-family;
    font-size: $font-size-p;

    border: 1px solid rgba($color-dark, 0.2);
    border-radius: $border-radius-normal;
    background-color: $color-light;
    color: $color-on-light;

    &:hover {
        border: 1px solid rgba($color-dark, 0.4);
    }
    &:focus-visible {
        border: 1px solid rgba($color-primary, 0.9);
        outline: 0 solid transparent;
    }
}

.form-notice {
    height: 16px;

    padding: 0 $spacing-xsmall;
    display: block;
    font-size: $font-size-xsmall;
    text-shadow: 0 1px 0.5px rgba(#000, 0.2);
    color: rgba($color-on-background, 0.7);

    &.error {
        color: $color-error;
    }
}

.form-message {
    margin-bottom: $spacing-small;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    text-shadow: 0 1px 0.5px rgba(#000, 0.2);
    border-radius: $border-radius-normal;
    color: $color-on-background;

    &.success {
        color: $color-primary;
    }
    &.error {
        color: $color-error;
    }
}