/*
 *   This file is part of 6502.ts, an emulator for 6502 based systems built
 *   in Typescript
 *
 *   Copyright (c) 2014 -- 2020 Christian Speckner and contributors
 *
 *   Permission is hereby granted, free of charge, to any person obtaining a copy
 *   of this software and associated documentation files (the "Software"), to deal
 *   in the Software without restriction, including without limitation the rights
 *   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 *   copies of the Software, and to permit persons to whom the Software is
 *   furnished to do so, subject to the following conditions:
 *
 *   The above copyright notice and this permission notice shall be included in all
 *   copies or substantial portions of the Software.
 *
 *   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 *   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 *   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 *   SOFTWARE.
 */

@import "constants";
@import "functions";

button {
    padding: 0 $cw;
    line-height: inherit;
    color: $black;
    background: $light-gray;
    margin-right: 2 * $cw;
    margin-bottom: 1em;

    &:last-child {
        margin-right: $cw;
    }

    &:not(:disabled) {
        @include box-shadow(($cw) 0.5em 0 $black);
    }

    &:disabled {
        color: $dark-gray;
    }

    &:not(:disabled):active {
        color: $white;
        background: $black;
    }

    &, &:focus, &:hover {
        border: none;
        outline: none;
    }

    &:hover {
        cursor: pointer;
    }
}

@mixin text {
    @include appearance-none;

    border: none;
    outline: none;
    background: $cyan;
    color: $black;
    height: 1em;
    border-radius: 0;
    padding: 0 $cw;

    &::placeholder {
        color: $dark-gray;
    }

    &:disabled {
        background: $light-gray;
    }
}

input[type=text], input[type=number], input[type=search] {
    @include text;

    cursor: text;

    &::placeholder {
        color: $dark-gray;
    }

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        @include appearance-none;
        margin: 0;
    }
}

select {
    @include text;
    padding-right: 2 * $cw;

    cursor: pointer;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    @include width-fit-content;

    &::after {
        content: '\25bc';
        color: $black;
        position: absolute;
        top: 0;
        right: 0;
        pointer-events: none;
        background: $light-gray;
    }
}

@mixin radio($deselected, $selected) {
    @include appearance-none;
    border: none;
    outline: none;
    background: none;
    display: inline; /* Our good friend iOS needs this for some reason or another */
    color: inherit;

    cursor: pointer;

    &::before {
        content: $deselected;
        white-space: nowrap;
    }

    &:checked {
        &::before {
            content: $selected;
            white-space: nowrap;
        }
    }

    &:disabled::before {
        color: $dark-gray;
    }

    &:focus {
        outline: none;
        border: none;
    }
}

input[type=checkbox] {
    @include radio('[ ]', '[x]');
}

input[type=radio] {
    @include radio('( )', '(*)');
}

input[type=range] {
    @include appearance-none;
    @include user-select(none);
    touch-action: manipulation;

    background: transparent;
    vertical-align: middle;
    cursor: pointer;
    height: 1em;
    color: inherit;

    &::-webkit-slider-runnable-track {
        @include appearance-none;

        width: 100%;
        height: 1 * $px;
        cursor: pointer;
        background: currentColor;
        outline: none;
        border: none;
    }

    &::-webkit-slider-thumb {
        @include appearance-none;

        height: 1em;
        width: $cw;
        background: currentColor;
        cursor: pointer;
        margin-top: -0.5em;
        border-radius: 0;
        outline: none;
        border: none;
    }

    &::-moz-range-track {
        @include appearance-none;

        width: 100%;
        height: 1 * $px;
        cursor: pointer;
        background-color: currentColor;
        outline: none;
        border: none;
    }

    &::-moz-range-thumb {
        @include appearance-none;

        height: 1em;
        width: $cw;
        border-radius: 0;
        background: currentColor;
        cursor: pointer;
        outline: none;
        border: none;
    }

    &:focus {
        outline: none;
        border: none;
    }
}

form {
    @include appearance-none;
    margin-block-end: 0;
}
