/*
 * Copyright (c) 2025 semedy AG. All rights reserved.
 */

#loginForm {
	margin: 4px auto;
	width: 300px;
	display: grid;
	grid-template-columns: max-content auto;
	gap: var(--gap-small) var(--gap-medium);
	align-items: baseline;
	text-align: left;

    table {
        border-spacing: 0 2px;
        width: 100%;
        text-align: left;
    }

    tbody {
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: baseline;
        gap: 4px 12px;

        tr {
            display: contents;
            td.login-control {

                padding-bottom: 6px;

                input {
                    width: 200px;
                }
            }

            td.login-label {
                padding: 0;
            }
        }
    }

    input {
        &[type='text'],
        &[type='password']{
            line-height: var(--line-height-default);
            padding: var(--padding-default);
            border-radius: 4px;
            border: var(--border-default);
            font-size: 1em; /* 1em to make the input field the same font size with its parents/surrounding */
            font-family: var(--font-family-default), sans-serif;

            &:focus-visible {
                box-shadow: var(--box-shadow-focus-inset);
                border-color: #4D92FD;
            }
            &:focus {
                outline: none;
            }
        }
    }

    #loginsubmit {
        padding: 4px 16px;
        border-radius: 6px;
        line-height: 18px;
        cursor: pointer;
        border: var(--border-default);
        background-color: #d7ebf9;
        color: #1c4955;
        text-decoration: none;
        font-family: var(--font-family-default), sans-serif;
        margin-bottom: 4px;
        &:focus-visible {
            box-shadow: var(--box-shadow-focus-inset);
            border-color: #4D92FD;
        }
        &:focus {
            outline: none;
        }
    }
}