/* Default Light */
:root {
    color-scheme: light;
    --bg-color: #fafafa;
    --text-color: #000;
    --border-color: #000;
    --disabled-color: #000;
    --light-element-display: none;
    --dark-element-display: initial;
    --theme-button-bg: #4e4d55;
    --theme-button-text: #ddd;
    --button-bg-enabled: #e9e9ed;
    --button-bg-disabled: #f4f4f6;
    --button_text_enabled: #000;
    --button_text_disabled: #707070;
    --button-border: #ccc;
    --tick-bit-active: #882255;
    --tick-bit-inactive: #88ccee;
}

/* Alternate Dark */
:root.alternate {
    color-scheme: dark;
    --bg-color: #303030;
    --text-color: #ddd;
    --border-color: #888;
    --disabled-color: #75747a;
    --light-element-display: initial;
    --dark-element-display: none;
    --theme-button-bg: #ddd;
    --theme-button-text: #000;
    --button-bg-enabled: #2b2a33;
    --button-bg-disabled: #222128;
    --button_text_enabled: #fbfbfe;
    --button_text_disabled: #75747a;
    --button-border: #666;
    --tick-bit-active: #ee6677;
    --tick-bit-inactive: #4477aa;
}

@media (prefers-color-scheme: dark) {
    /* Default Dark */
    :root {
        color-scheme: dark;
        --bg-color: #303030;
        --text-color: #ddd;
        --border-color: #888;
        --disabled-color: #75747a;
        --light-element-display: initial;
        --dark-element-display: none;
        --theme-button-bg: #ddd;
        --theme-button-text: #000;
        --button-bg-enabled: #2b2a33;
        --button-bg-disabled: #222128;
        --button_text_enabled: #fbfbfe;
        --button_text_disabled: #75747a;
        --button-border: #666;
        --tick-bit-active: #ee6677;
        --tick-bit-inactive: #4477aa;
    }

    /* Alternate Light */
    :root.alternate {
        color-scheme: light;
        --bg-color: #fafafa;
        --text-color: #000;
        --border-color: #000;
        --disabled-color: #6d6d6d;
        --light-element-display: none;
        --dark-element-display: initial;
        --theme-button-bg: #4e4d55;
        --theme-button-text: #ddd;
        --button-bg-enabled: #e9e9ed;
        --button-bg-disabled: #f4f4f6;
        --button_text_enabled: #000;
        --button_text_disabled: #707070;
        --button-border: #ccc;
        --tick-bit-active: #882255;
        --tick-bit-inactive: #88ccee;
    }
}

.no_js_time_perspective {
    display: none;
}

.time_perspectives button {
    background-color: var(--button-bg-enabled);
    color: var(--button_text_enabled);
    border: 2px solid var(--button-border);
    border-radius: 5px;
}

.time_perspectives button:hover {
    cursor: pointer;
}

.time_perspectives button:disabled {
    color: var(--button_text_disabled);
    background-color: var(--button-bg-disabled);
    cursor: default;
}

.time_perspectives .tickers {
    display: flex;
    margin: 5rem auto 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
}

.time_perspectives .ticker_group {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    margin-bottom: 2rem;
    align-items: center;
}

.time_perspectives .ticker_pair {
    width: 250px;
}

.time_perspectives .filter_button {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.time_perspectives .button_text {
    font-size: .7rem;
}

.time_perspectives .perspectiveEyeIcons img {
    width: 25px;
    margin-top: 10px;
}

.time_perspectives .lightEye {
    display: var(--dark-element-display);
}

.time_perspectives .darkEye{
    display: var(--light-element-display);
}

.time_perspectives .ticker {
    position: relative;
    height: 100px;
    width: 100px;
}

.time_perspectives .ticker_bits {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 100px;
    width: 100px;
}

.time_perspectives .tick_bit,
.time_perspectives .tick_bit2,
.time_perspectives .tick_bit3,
.time_perspectives .tick_bit4,
.time_perspectives .tick_bit_noJS {
    height: 100%;
    width: 100%;
    background-color: var(--tick-bit-inactive);
    border-radius: 50%;
}

.time_perspectives .tick_display{
    position: absolute;
    top: 42%;
    left: 13%;
    text-align: center;
    width: 75px;
}

.time_perspectives .highlight_tick,
.time_perspectives .tick_bit_noJS {
    background-color: var(--tick-bit-active);
}

.time_perspectives .controls {
    width: 300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.time_perspectives .buttons {
    display: flex;
    margin: .5rem;
    justify-content: space-evenly;
}

.time_perspectives .buttons button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    width: 3rem;
}

.time_perspectives .forwardArrow,
.time_perspectives .reverseArrow {
    display: inline-block;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--button_text_enabled);
    transform: rotate(-90deg);
}

.time_perspectives #forwardButton:disabled .forwardArrow,
.time_perspectives #reverseButton:disabled .reverseArrow {
    border-top: 9px solid var(--button_text_disabled);
}

.time_perspectives .pauseBar {
    display: inline-block;
    background-color: var(--button_text_enabled);
    width: 3px;
    height: 19px;
    margin: 0 3px;
    border-radius: 5px;
}

.time_perspectives #pauseButton:disabled .pauseBar {
    background-color: var(--button_text_disabled);
}

.time_perspectives #resetButton {
    height: 2rem;
    width: 10rem;
    margin: .5rem auto;
}

.time_perspectives .hide {
    visibility: hidden;
}


/* MEDIA QUERIES */

@media only screen and (min-width: 720px) {

    .time_perspectives .tickers {
        width: 600px;
        flex-direction: row;
        justify-content: space-around;
    }
}


@media only screen and (min-width: 1020px) {
    .time_perspectives main {
        margin: 0 auto;
        width: 1000px;
    }
}