@import url('../base/base.css');
@import url('../components/page-section.css');
@import url('../components/container.css');
@import url('../components/button.css');
@import url('../components/formlabel.css');
@import url('../components/box.css');
@import url('../components/header.css');
@import url('../components/radio-checkbox.css');
@import url('../components/spacing.css');


label:not([class]) + textarea:not([class]),
label:not([class]) + input[type=email]:not([class]),
label:not([class]) + input[type=password]:not([class]),
label:not([class]) + input[type=text]:not([class]) {
    display: block;
    width: 100%;
}

textarea:not([class]),
input:not([class]) {
    --border-color: var(--tInputBorderColor);
    --color: var(--tInputTextColor);
    --background-color: var(--tInputBgColor);
    --placeholder-color: var(--tInputPlaceholderColor);
    font-family: var(--tFontDefaultFamily);
    font-size: var(--tFontSizeDefault);
    line-height: var(--tLineHeightDefault);
    padding: var(--tInputVPadding) var(--tInputHPadding);
    background-color: var(--background-color);
    color: var(--color);
    border: var(--tBorderWidth) solid var(--border-color);
    border-radius: var(--tBorderRadius);
    /* transition: 180ms box-shadow ease-in-out;    */
    display: inline-block;
    box-sizing: border-box;
    margin: var(--tInputMargin);
    outline: none;
    box-shadow: none;
}

textarea:not([class]):focus,
input:not([class]):focus {
    --border-color: var(--tInputBorderFocusColor);
    --color: var(--tInputTextFocusColor);
    --background-color: var(--tInputBgFocusColor);
    --placeholder-color: var(--tInputPlaceholderFocusColor);
    outline: none;
}

input:not([class])[type="file"] {
    font-size: 0.9em;
    padding-top: 0.35rem;
}

textarea:not([class])::placeholder,
input:not([class])::placeholder {
    color: var(--placeholder-color);
    font-style: italic;
    opacity: 1;
}

textarea:not([class]) {
    resize: vertical;
    width: 100%;
}

textarea:not([class])[readonly],
input:not([class])[readonly] {
    border-style: dashed;
    cursor: not-allowed;
    --color: var(--tColorContrast60);
    --border-color: var(--tColorContrast60);
}

textarea:not([class])[disabled],
input:not([class])[disabled] {
    --border-color: var(--tColorContrast60);
    --background-color: var(--tInputDisabledBgColor);
    cursor: not-allowed;
}

textarea:not([class]):invalid:not(:placeholder-shown),
input:not([class]):invalid:not(:placeholder-shown) {  /* not(:placeholder-shown) is cross browser speak for not empty */
    --border-color: var(--tDangerColorContrast0);
}

ul.errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.errorlist li {
    padding: var(--tVspacingMedium) var(--tHspacingMedium);
    margin: 0 0 var(--tVspacingMedium) 0;
    background-color: var(--tDangerColorContrast0);
    color: var(--tDangerColorContrast100);
    --tColorContrast0: var(--tDangerColorContrast0);
    --tColorContrast1: var(--tDangerColorContrast1);
    --tColorContrast20: var(--tDangerColorContrast20);
    --tColorContrast60: var(--tDangerColorContrast60);
    --tColorContrast80: var(--tDangerColorContrast80);
    --tColorContrast100: var(--tDangerColorContrast100);
    --tLinkColor: var(--tDangerColorContrast80);
    --tLinkHoverColor: var(--tDangerColorContrast100);
}