/* Sizes from https://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning */

/* Mobile Styles */
@media only screen and (max-width: 519px) {
    :root {
        --stopwatch-digit-divider-height: 50px;
        --stopwatch-padding: 0px;
        --stopwatch-controls-grid-template-columns: 2;
        --stopwatch-controls-grid-gap: 1rem;
        --display-keyboard-shortcut: none;
    }
}

/* Tablet Styles */
@media only screen and (min-width: 520px) and (max-width: 959px) {
    :root {
        --stopwatch-digit-divider-height: 71px;
        --stopwatch-controls-grid-template-columns: 2;
        --stopwatch-controls-grid-gap: 1rem;
        --stopwatch-padding: 10px;
        --display-keyboard-shortcut: none;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 960px) {
    :root {
        --stopwatch-digit-divider-height: 120px;
        --stopwatch-controls-grid-template-columns: 4;
        --stopwatch-controls-grid-gap: 2rem;
        --stopwatch-padding: 20px;
        --display-keyboard-shortcut: inline-block;
    }
}

/* Global variables */
:root {
    --stopwatch-digit-divider-color: #000;
    --global-animation: 0.2s ease-in-out;
}

/* Dark Mode enabled */
@media (prefers-color-scheme: dark) {
    :root {
        --stopwatch-digit-divider-color: rgb(255, 255, 255);
    }
}

div#stopwatch_digits_area {
    text-align: center;
    padding: var(--stopwatch-padding);
    margin: auto;
    max-width: 800px;
}

ul#stopwatch_controls_area, ul#stopwatch_data_controls_area {
    margin: auto;
    padding: 0;
    max-width: 800px;
    display: grid;
    grid-template-columns: repeat(var(--stopwatch-controls-grid-template-columns), 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: var(--stopwatch-controls-grid-gap);
    grid-row-gap: var(--stopwatch-controls-grid-gap);
    align-items: center;
}

ul#stopwatch_data_controls_area {
    grid-template-columns: repeat(calc(var(--stopwatch-controls-grid-template-columns) / 2), 1fr);
}

/**
 * Buttons
 */
ul#stopwatch_controls_area>button, ul#stopwatch_data_controls_area>button {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: var(--main-second-color);
    color: var(--text-color);
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    padding: 1rem 0.5rem;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    /* Animations */
    transition: background-color var(--global-animation), color var(--global-animation);
}

ul#stopwatch_controls_area>button:hover,
ul#stopwatch_controls_area>button:focus,
ul#stopwatch_data_controls_area>button:hover,
ul#stopwatch_data_controls_area>button:focus {
    color: var(--text-color);
    outline: 0;
}

ul#stopwatch_controls_area>button#start_stop:hover,
ul#stopwatch_controls_area>button#start_stop:focus {
    background-color: rgb(212, 0, 0);
}

ul#stopwatch_controls_area>button#restart:hover,
ul#stopwatch_controls_area>button#restart:focus {
    background-color: rgb(0, 109, 212);
}

ul#stopwatch_controls_area>button#add_lap:hover,
ul#stopwatch_controls_area>button#add_lap:focus {
    background-color: rgb(66, 146, 0);
}

ul#stopwatch_controls_area>button#clear_laps:hover,
ul#stopwatch_controls_area>button#clear_laps:focus {
    background-color: rgb(137, 0, 172);
}

ul#stopwatch_data_controls_area>button#download_data:hover,
ul#stopwatch_data_controls_area>button#download_data:focus {
    background-color: rgb(172, 77, 0);
}

ul#stopwatch_controls_area>button>kbd,
ul#stopwatch_data_controls_area>button>kbd {
    display: var(--display-keyboard-shortcut);
    cursor: pointer;
    margin-left: 1rem;
}

/**
 * Laps
 */
ul#stopwatch_laps_area {
    list-style-type: none;
    padding: 0;
}

ul#stopwatch_laps_area>li {
    background-color: transparent;
    padding: 0;
    border-radius: 4px;
    margin: 0.5rem auto;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    /* Animations */
    transition: color var(--global-animation);
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container {
    display: block;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>time {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-color);
    /* Animations */
    transition: color var(--global-animation);
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite {
    width: 1.5rem;
    height: 1.5rem;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross {
    margin-left: 1rem;
    opacity: 0.3;
    cursor: pointer;
    /* Animations */
    transition: background-color var(--global-animation);
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite {
    margin-right: 1rem;
    opacity: 0;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:hover {
    opacity: 1;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:before,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:after,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:before,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:after {
    position: absolute;
    content: ' ';
    height: 1.5rem;
    width: 2px;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:before,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:after {
    background-color: var(--text-color);

}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:before,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:after {
    background-color: transparent;
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:before,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:before {
    transform: rotate(45deg);
}

ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross:after,
ul#stopwatch_laps_area>li>div.stopwatch_time_container>div.stopwatch-remove-lap-cross-opposite:after {
    transform: rotate(-45deg);
}





/**
 * Divider
 *
 *   (0)
 *         x1 (hour - min) x1 (min -sec) x1 (sec -millisec)
 *   (1)
 *
 */

div#stopwatch_digits_area>div.stopwatch_digits_divider {
    position: relative;
    display: inline-block;
    text-align: center;
    height: var(--stopwatch-digit-divider-height);
    width: calc(var(--stopwatch-digit-divider-height) / 10);
    margin: calc(var(--stopwatch-digit-divider-height) / 20);
    /* Animations */
    transition: height var(--global-animation), width var(--global-animation), margin var(--global-animation);
}

div#stopwatch_digits_area>div.stopwatch_digits_divider>span {
    position: absolute;
    background-color: var(--stopwatch-digit-divider-color);
    height: calc(var(--stopwatch-digit-divider-height) / 20);
    width: calc(var(--stopwatch-digit-divider-height) / 20);
    /* Animations */
    transition: height var(--global-animation), width var(--global-animation), background-color width var(--global-animation);
}

div#stopwatch_digits_area>div.stopwatch_digits_divider>span.stopwatch_digits_divider_0 {
    top: calc(var(--stopwatch-digit-divider-height) / 6 * 2 - (var(--stopwatch-digit-divider-height) / 10 / 2));
}

div#stopwatch_digits_area>div.stopwatch_digits_divider>span.stopwatch_digits_divider_1 {
    top: calc(var(--stopwatch-digit-divider-height) / 6 * 4 - (var(--stopwatch-digit-divider-height) / 10 / 2));
}

/**
 * Digit
 *
 *  --(0)--
 *  |     |
 * (3)   (4)
 *  |     |
 *  --(1)--    x2 (hour) x2 (min) x2 (sec) x4 (millisec)
 *  |     |
 * (5)   (6)
 *  |     |
 *  --(2)--
 *
 */

div#stopwatch_digits_area>div.stopwatch_digits_element {
    position: relative;
    display: inline-block;
    width: calc(var(--stopwatch-digit-divider-height) / 2);
    height: var(--stopwatch-digit-divider-height);
    margin: calc(var(--stopwatch-digit-divider-height) / 20);
    /* Animations */
    transition: height var(--global-animation), width var(--global-animation), margin var(--global-animation);
}

div#stopwatch_digits_area>div.stopwatch_digits_element>span {
    position: absolute;
    background-color: transparent;
    /* Animations */
    /* Disable background color animation because it looks bad when the time updates quickly */
    transition: height var(--global-animation), width var(--global-animation), background-color 0s;
}

/* All the horizontal lines (0,1,2) [width, height] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_2 {
    width: calc(var(--stopwatch-digit-divider-height) / 2 - 2 * var(--stopwatch-digit-divider-height) / 20);
    height: calc(var(--stopwatch-digit-divider-height) / 20);
    left: calc(((var(--stopwatch-digit-divider-height) / 2) - var(--stopwatch-digit-element-length)) / 2);
}

/* All the vertical lines (3,4,5,6) [width, height] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_5,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_6 {
    width: calc(var(--stopwatch-digit-divider-height) / 20);
    height: calc(var(--stopwatch-digit-divider-height) / 2 - 1.5 * var(--stopwatch-digit-divider-height) / 20);
}

/* All the horizontal lines (0,1,2) [orientation x] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_2 {
    left: calc((var(--stopwatch-digit-divider-height) / 2 - var(--stopwatch-digit-divider-height) / 2 / 5 * 4) / 2);
}

/* Horizontal line 0 [orientation y] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_0 {
    top: 0;
}

/* Horizontal line 1 [orientation y] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_1 {
    top: calc(var(--stopwatch-digit-divider-height) / 2 - 0.5 * var(--stopwatch-digit-divider-height) / 20);
}

/* Horizontal line 2 [orientation y] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_2 {
    bottom: 0;
}


/* Vertical lines (3,5) [orientation x] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_5 {
    left: 0;
}

/* Vertical lines (4,6) [orientation x] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_6 {
    right: 0;
}

/* Vertical lines (3,4) [orientation y] */
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_4 {
    top: calc(var(--stopwatch-digit-divider-height) / 20);
}

div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_5,
div#stopwatch_digits_area>div.stopwatch_digits_element>span.stopwatch_digits_element_6 {
    bottom: calc(var(--stopwatch-digit-divider-height) / 20);
}


/**
 * Color formatting for the digits
 */

div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_5,
div#stopwatch_digits_area>div.stopwatch_digits_element.zero>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.one>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.one>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.two>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.two>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.two>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.two>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.two>span.stopwatch_digits_element_5 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.three>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.three>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.three>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.three>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.three>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.four>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.four>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element.four>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.four>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.five>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.five>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.five>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.five>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element.five>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_5,
div#stopwatch_digits_area>div.stopwatch_digits_element.six>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.seven>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.seven>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.seven>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.eight>span {
    background-color: var(--stopwatch-digit-divider-color);
}

div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_0,
div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_1,
div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_2,
div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_3,
div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_4,
div#stopwatch_digits_area>div.stopwatch_digits_element.nine>span.stopwatch_digits_element_6 {
    background-color: var(--stopwatch-digit-divider-color);
}