/* Generic */
html, body {
    font-family: var(--va-font-family);
    letter-spacing: 1px;
}

.hidden {
    display: none !important;
}

a, .btn-link {
    color: #006bb7;
}

div {
    /* Reconnect White Screen */

    &#components-reconnect-modal {
        h5 {
            color: var(--va-grey);
        }
    }
}

/* Transition */
.va-transition-color {
    transition: background-color var(--rz-transition), color var(--rz-transition);
}

/* Colors */
.va-color {
    &.bg-grey {
        background-color: var(--va-grey);
    }
}

/* Cursor */
.va-clickable {
    cursor: pointer;
}

/* Panel */
.va-panel {
    background-color: var(--va-grey-dark);
}

/* Title */
.va-title {
    &.va-title-small {
        font-size: small;
        letter-spacing: 2px;
        line-height: 11px;
        margin-bottom: 15px;
    }
}

/* Flex */
.va-flex-column {
    display: flex;
    flex-direction: column;
}

.va-flex-row {
    display: flex;
    flex-direction: row;
}

/* Separators */
.va-horizontal-line {
    width: 100%;
    height: 3px;
    background-color: var(--va-grey-light);
    margin-top: 10px;
}

.va-vertical-line {
    width: 3px;
    height: 100%;
    background-color: var(--va-grey-light);
    margin-left: 10px;

    &.thin {
        width: 1px;
    }
}

/* Icons */
.va-icon {
    .va-spinner.small {
        margin: 6px 0 0 3px;
    }

    &.colored {
        &.grey {
            --color: var(--va-grey);
        }

        &.white-dark {
            --color: var(--va-white-dark);
        }

        &.white-darker {
            --color: var(--va-white-darker);
        }

        &.green {
            --color: var(--va-mint-green);
        }

        &.green-matt {
            --color: var(--va-green-matt);
        }

        &.blue {
            --color: var(--va-blue);
        }

        &.yellow {
            --color: var(--va-yellow);
        }

        &.lilac {
            --color: var(--va-lilac);
        }

        &.tomato-red {
            --color: var(--va-tomato-red);
        }

        &.va-text-dark {
            --color: var(--va-text-dark);
        }

        &.va-text-light {
            --color: var(--va-text-icon-light);
        }
    }
}

/* Buttons */
.va-button {
    button {
        cursor: pointer;
    }

    &.icon-button button {
        padding: 2px 0 0;
    }

    &.disabled button {
        cursor: default;
        opacity: 0.35;

        &.rz-button:hover {
            background-image: none;
            box-shadow: none;
        }
    }
}

.va-button-subtitle {
    font-size: 10px;

    &.disabled {
        opacity: 0.35;
    }

    &.green {
        color: var(--va-mint-green);
    }

    &.blue {
        color: var(--va-blue);
    }
}

/* Bootstrap Icons */
.va-icon {
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: bottom;

    &:not(.colored) {
        background-image: var(--url);
        background-size: cover;
    }

    &.colored {
        background-color: var(--color);
        mask-image: var(--url);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: cover;
    }

    &.white-dark {
        --color: var(--va-white-dark)
    }

    &.blue {
        --color: var(--va-blue)
    }

    &.metrics-arrival-color {
        --color: var(--va-metrics-arrival-color);
    }

    &.metrics-departure-color {
        --color: var(--va-metrics-departure-color);
    }

    &.large {
        height: 2rem;
        width: 2rem;
        margin-top: 3px;
    }

    &.medium {
        width: 1.75rem;
        height: 1.75rem;
    }

    &.small {
        width: 1.5rem;
        height: 1.5rem;
    }

    &.smaller {
        width: 1.25rem;
        height: 1.25rem;
    }

    &.smallest {
        width: 1.1rem;
        height: 1.1rem;
    }

    &.va-rotated {
        transform: rotate(var(--va-rotation));
    }

    &.button {
        cursor: pointer;
        opacity: 0.8;

        &:hover {
            opacity: 1;
        }

        &.disabled {
            cursor: default;
            opacity: 0.35;
        }
    }

    &.dataset-icon {
        --url: url(../images/material-design/database.svg);
    }

    &.bi-arrow-bar-left {
        --url: url(../images/bi/arrow-bar-left.svg);
    }

    &.bi-arrow-up {
        --url: url(../images/bi/arrow-up.svg);
    }

    &.bi-arrows-move {
        --url: url(../images/bi/arrows-move.svg);
    }

    &.bi-check-lg {
        --url: url(../images/bi/check-lg.svg);
    }

    &.bi-check-square-fill {
        --url: url(../images/bi/check-square-fill.svg);
    }

    &.bi-circle {
        --url: url(../images/bi/circle.svg);
    }

    &.bi-clock {
        --url: url(../images/bi/clock.svg);
    }

    &.bi-house-door-fill {
        --url: url(../images/bi/house-door-fill.svg);
    }

    &.bi-lightbulb {
        --url: url(../images/bi/lightbulb.svg);
    }

    &.bi-lock-fill {
        --url: url(../images/bi/lock-fill.svg);
    }

    &.bi-pause-fill {
        --url: url(../images/bi/pause-fill.svg);
    }

    &.bi-pencil-fill {
        --url: url(../images/bi/pencil-fill.svg);
    }

    &.bi-person-badge-fill {
        --url: url(../images/bi/person-badge-fill.svg);
    }

    &.bi-person-fill {
        --url: url(../images/bi/person-fill.svg);
    }

    &.bi-play-fill {
        --url: url(../images/bi/play-fill.svg);
    }

    &.bi-skip-backward-fill {
        --url: url(../images/bi/skip-backward-fill.svg);
    }

    &.bi-skip-forward-fill {
        --url: url(../images/bi/skip-forward-fill.svg);
    }

    &.bi-square-fill {
        --url: url(../images/bi/square-fill.svg);
    }

    &.bi-trash-fill {
        --url: url(../images/bi/trash-fill.svg);
    }

    &.bi-x {
        --url: url(../images/bi/x.svg);
    }

    &.broom {
        --url: url(../images/broom.svg);
    }

    &.filter_arrow_right {
        --url: url(../images/filter_arrow_right.svg);
    }
}

/* Nav Link */
.va-nav-link {
    &.nav-link {
        margin-right: 1rem;
    }
}

/* Spinner */
.va-spinner.spinner-border {
    &.small {
        width: 20px;
        height: 20px;
    }

    &.text-light {
        color: var(--va-text-light);
    }
}

/* Input */
.va-input {
    background-color: var(--va-grey-light);
    color: var(--va-text-light);
    border: 0;
    padding: 4px 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    outline: none;
}