@use 'design-system' as *;

$trial-licence-small: 680px;

.trialForm {
    display: flex;
    flex-direction: column;
}

.inputs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    @media screen and (min-width: $trial-licence-small) {
        flex-direction: row;
        gap: $spacing-size-4;

        :global(.input-field) {
            flex-grow: 1;
        }

        .emailField {
            flex-grow: 6;
        }

        input {
            width: 100%;
        }
    }
}

.emailInputOuter {
    position: relative;

    input[type='email'] {
        width: 100%;
        padding: 0.375em 0.75em 0.375em 2.75em;
    }

    :global(.icon) {
        --icon-size: #{$spacing-size-6};
        --icon-color: var(--color-util-gray-400);

        position: absolute;
        top: 7px;
        left: $spacing-size-3;
    }
}

.actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: $spacing-size-4;

    p {
        width: fit-content;
    }

    button {
        width: 100%;

        @media screen and (min-width: $trial-licence-small) {
            width: fit-content;
        }
    }

    @media screen and (max-width: $trial-licence-small) {
        margin-top: $spacing-size-2;
    }
}

div p.privacyMessage {
    font-size: var(--text-fs-xs);
    line-height: var(--text-lh-xs);
    color: color-mix(in srgb, var(--color-text-secondary), var(--color-bg-primary) 30%);

    a {
        font-weight: var(--text-regular);
    }
}

.statusMessage {
    display: flex;
    gap: $spacing-size-2;
    align-items: center;
    padding: $spacing-size-2 $spacing-size-3;
    font-size: var(--text-fs-sm) !important;
    line-height: var(--text-lh-sm) !important;
    color: var(--color-gray-600);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-sm);

    #{$selector-darkmode} & {
        color: var(--color-gray-400);
    }

    &.errorMessage {
        border-color: var(--color-util-warning-500);
    }
}

.statusIconSuccess {
    --icon-size: #{$spacing-size-6};
    --icon-color: var(--color-bg-primary);

    flex-shrink: 0;
    padding: $spacing-size-1;
    background-color: var(--color-success);
    border-radius: 50%;
}

.statusIconError {
    --icon-size: #{$spacing-size-6};
    --icon-color: var(--color-util-warning-500);

    flex-shrink: 0;
}

// Pricing page form changes
:global(.trial-licence-form) {
    .trialForm {
        @media screen and (min-width: $breakpoint-pricing-large) {
            padding-left: 18%;
        }
    }

    .inputs {
        flex-wrap: wrap;
        gap: 0 $spacing-size-4;
    }

    .emailField {
        width: 100%;
    }

    .actions {
        margin-top: $spacing-size-4;
    }
}
