/******************************************************************************
 *
 * Copyright (c) 2017, the Perspective Authors.
 *
 * This file is part of the Perspective library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */

@import "./radio-list.less";

:host {
    position: fixed;
    z-index: 10000;
    padding: 6px;
    outline: none;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: 300;
    border: inherit;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    user-select: none;

    input.parameter {
        max-width: 65px;
        background: none;
        color: inherit;
        border: 0px solid transparent;
        outline: none;
    }

    input.parameter[type="number"] {
        border-bottom-width: 1px;
        border-color: var(--input--border-color);
    }

    .indent {
        margin-left: 24px;
    }

    input[type="checkbox"],
    & > div > div > span:first-child {
        width: 24px;
        margin: 0;
    }

    input[type="checkbox"] {
        appearance: none;
        font-family: "Material Icons";
        font-size: 16px;
        text-align: center;

        &:checked:after {
            content: "\E834";
        }

        &:not([disabled]):checked:after {
            color: var(--active-color, red);
        }

        &:after {
            content: "\E835";
            color: var(--inactive-color, #999);
        }
    }

    input[type="radio"] {
        appearance: none;
        font-family: "Material Icons";
        font-size: 16px;
        font-feature-settings: "liga";
        text-align: center;

        &:checked:after {
            content: "radio_button_checked";
            color: var(--active-color, red);
        }

        &:after {
            content: "radio_button_unchecked";
            color: var(--inactive-color, #999);
        }
    }

    div.section {
        margin-bottom: 8px;
    }

    div.row {
        display: flex;
        align-items: center;
        height: 24px;
    }

    input[type="color"] {
        width: 24px;
    }

    .operator {
        font-family: "Roboto Mono", monospace;
        white-space: pre;
    }

    input.parameter[disabled] {
        opacity: 0.5;
    }
}