@import 'common.less';

:root {
    --header-control-border-color: #fff;
}

select,
button,
input {
    color: inherit;
}

select,
label,
input,
legend,
.header-text-button,
.form-button,
.form-line {
    font-family: 'Roboto Condensed', sans-serif;
}

select {
    background: transparent;
    outline: none;
    border: none;
    appearance: none;
    padding: 1px 15px 1px 5px;
    width: 100%;
}

option, optgroup {
    color: #000;
    background-color: #fff;
}

.select-wrapper {
    position: relative;
    border: 1px solid var(--border-color);

    &::after {
        content: '\0025be'; /* ▾ */
        position: absolute;
        right: 2px;
        top: 0;
        pointer-events: none;
    }
}

fieldset {
    border: none;
    padding: 0;

    & + & {
        margin-top: 20px;
    }
}

legend {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    color: var(--border-color);
    text-transform: uppercase;

    &::after {
        content: '';
        margin-left: 10px;
        flex-grow: 1;
        height: 1px;
        border-top: 1px solid var(--border-color);
    }
}

.form-line {
    display: flex;
    align-items: center;
}

legend + .form-line,
.form-line + .form-line {
    margin-top: 10px;
}

.form-errors {
    color: @error-color;

    &:empty {
        display: none;
    }
}

label {
    display: inline-block;
}

label + input {
    margin-left: 10px;
    flex-grow: 1;
}

input {
    padding: 1px 5px;
}

button {
    appearance: none;
    border-radius: 0;
    cursor: pointer;
    background: none;
}

.header-text-button {
    border: 1px solid var(--header-control-border-color);
}

form button {
    border: 1px solid var(--border-color);

    &[disabled] {
        background-color: var(--border-color);
    }
}

.form-button-primary {
    padding: 3px 6px;
    border: none;
    background-color: @primary-color;
    color: #fff;
}

.form-aligned {
    label {
        min-width: 4.5em;
    }

    .select-wrapper {
        flex-grow: 1;
    }
}