@import 'colours';

$tcol: map-get(map-get($colors, dsst), text);
$lcol: map-get(map-get($colors, dsst), light);
$llcol: map-get(map-get($colors, dsst), lesslight);
$hcol: map-get(map-get($colors, dsst), yellow);
$text: nth(map-get($colors, dark), 1);
$itext: nth(map-get($colors, light), 1);

$bs: 1px;

button {

    -webkit-appearance: none;
    background-color: $lcol;

    a, i {
        text-decoration: none;
        color: $text;
    }
}

button:hover {
    background-color: $tcol;
    border: $bs solid $lcol;
    cursor: pointer;

    a, i {
        color: $lcol;
    }
}

button:active {
    background-color: $hcol;
}

button[disabled],
button[disabled] a,
button[disabled] i {
    cursor: not-allowed;
    color: $itext;
}

button[disabled]:hover {
    background-color: $lcol;
    border: $bs solid $itext;
}

input::not([type=range]),
label,
textarea,
button {
    -webkit-appearance: none;
    color: $tcol;
    font-size: 1rem;
    padding: 0.4em 0.8em;
}

input[type=number] {
    -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input-radio {
    height: 0;
    width: 0;
    opacity: 0;
}

.input-radio:hover ~ label {
    border: $bs solid $tcol;
    opacity: 1;
}

.input-radio:active ~ label {
    border: $bs solid $hcol;
    color: $hcol;
    opacity: 1;
}

.input-radio:checked ~ label {
    border: $bs solid $tcol;
    opacity: 1;
}

.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.input-radio ~ label {
    border: $bs solid $lcol;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    opacity: 0.6;
}

.input-file + label,
.input-colour + label {
    background-color: transparent;
    font-size: 1em;
    cursor: pointer;
    display: inline-block;
}

.input-file:focus + label,
.input-file + label:hover {
    border: $bs solid $lcol;
    background-color: $tcol;
    color: $lcol;
}

.input-file:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.input-file + label:active {
    // border: $bs solid $lcol;
    background-color: $hcol;
    // color: $lcol;
}

.form-inline .form-control {
    display: inline-block;
    height: 2.2em;
    vertical-align: middle;
    width: auto;
}

.form-item {
    border: $bs solid $tcol;
    // float: left;
    font-size: 1rem;
    margin: 0.2rem;
    padding: 0.4rem 0.8rem;
}

label {
    background-color: $llcol;
}

fieldset {
    border-color: transparent;
}
