@mixin disableAppareance {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

@mixin form-baseStyle {
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--border-size);
    border: 1px solid var(--color-lightgray);
    background-color: var(--fields);
    color: var(--text);
    margin-bottom: 0.5rem;

    &:focus {
        border-color: var(--color-primary);
    }
}

@mixin form-textarea {
    @include form-baseStyle();
    padding: 1rem;

    resize: none;
    overflow: hidden;
}

@mixin form-select {
    @include disableAppareance();
    @include form-baseStyle();
    outline: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='20px'><text y='15' fill='gray' font-size='20'>▾</text></svg>")
        no-repeat right var(--fields);
    padding: 0.5rem 1rem;
}

@mixin form-selectMultiple {
    @include form-select();
    background-image: none;
    border-radius: var(--border-size);

    @media screen and (min-width: 750px) {
        border-radius: var(--border-size) 0 0 var(--border-size);
    }
}

@mixin form-checkRadio {
    display: none;

    + label {
        display: inline-block;
        border-radius: var(--border-size);
        background-color: var(--color-lightgray);
        padding: 1rem;
        margin: 0.5rem;
        cursor: pointer;
        color: var(--color-dark);
    }

    &:hover + label {
        background-color: var(--list2);
        color: var(--text);
    }

    &:checked + label {
        background-color: var(--color-primary);
        color: var(--color-light);
    }
}

@mixin form-button {
    @include form-baseStyle();
    padding: 0.5rem;
    cursor: pointer;
    outline: none;

    &:hover {
        background-color: var(--color-lightgray);
        color: var(--color-dark);
    }
}

@mixin form-buttonSubmit {
    @include form-button();
    background-color: var(--color-primary);
    color: var(--color-light) !important;

    &:hover {
        background-color: var(--color-secondary);
    }
}