"use client";
import { Root } from "../../../../lib/style";
import { css, keyframes, styled } from "styled-components";
const blink = (color) => keyframes `
  0% { background-color: rgba(${Root.Color(color)}, 0.5); }
  100% { background-color: transparent; }
`;
const Bar = (color) => css `
    &:nth-child(1) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.35), rgba(${Root.Color(color)}, 0.35));
    }
    &:nth-child(2) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.3), rgba(${Root.Color(color)}, 0.3));
    }
    &:nth-child(3) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.3), rgba(${Root.Color(color)}, 0.3));
    }
    &:nth-child(4) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.29), rgba(${Root.Color(color)}, 0.29));
    }
    &:nth-child(5) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.29), rgba(${Root.Color(color)}, 0.29));
    }
    &:nth-child(6) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.28), rgba(${Root.Color(color)}, 0.28));
    }
    &:nth-child(7) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.28), rgba(${Root.Color(color)}, 0.28));
    }
    &:nth-child(8) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.27), rgba(${Root.Color(color)}, 0.27));
    }
    &:nth-child(9) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.27), rgba(${Root.Color(color)}, 0.27));
    }
    &:nth-child(10) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.26), rgba(${Root.Color(color)}, 0.26));
    }
    &:nth-child(11) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.26), rgba(${Root.Color(color)}, 0.26));
    }
    &:nth-child(12) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.25), rgba(${Root.Color(color)}, 0.25));
    }
    &:nth-child(13) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.24), rgba(${Root.Color(color)}, 0.24));
    }
    &:nth-child(14) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.24), rgba(${Root.Color(color)}, 0.24));
    }
    &:nth-child(15) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.23), rgba(${Root.Color(color)}, 0.23));
    }
    &:nth-child(16) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.23), rgba(${Root.Color(color)}, 0.23));
    }
    &:nth-child(17) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.22), rgba(${Root.Color(color)}, 0.22));
    }
    &:nth-child(18) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.21), rgba(${Root.Color(color)}, 0.21));
    }
    &:nth-child(19) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.2), rgba(${Root.Color(color)}, 0.2));
    }
    &:nth-child(20) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.2), rgba(${Root.Color(color)}, 0.2));
    }
    &:nth-child(21) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.19), rgba(${Root.Color(color)}, 0.19));
    }
    &:nth-child(22) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.19), rgba(${Root.Color(color)}, 0.19));
    }
    &:nth-child(23) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.18), rgba(${Root.Color(color)}, 0.18));
    }
    &:nth-child(24) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.18), rgba(${Root.Color(color)}, 0.18));
    }
    &:nth-child(25) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.17), rgba(${Root.Color(color)}, 0.17));
    }
    &:nth-child(26) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.17), rgba(${Root.Color(color)}, 0.17));
    }
    &:nth-child(27) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.16), rgba(${Root.Color(color)}, 0.16));
    }
    &:nth-child(28) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.16), rgba(${Root.Color(color)}, 0.16));
    }
    &:nth-child(29) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.15), rgba(${Root.Color(color)}, 0.15));
    }
    &:nth-child(30) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.15), rgba(${Root.Color(color)}, 0.15));
    }
    &:nth-child(31) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.14), rgba(${Root.Color(color)}, 0.14));
    }
    &:nth-child(32) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.14), rgba(${Root.Color(color)}, 0.14));
    }
    &:nth-child(33) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.13), rgba(${Root.Color(color)}, 0.13));
    }
    &:nth-child(34) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.13), rgba(${Root.Color(color)}, 0.13));
    }
    &:nth-child(35) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.12), rgba(${Root.Color(color)}, 0.12));
    }
    &:nth-child(36) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.12), rgba(${Root.Color(color)}, 0.12));
    }
    &:nth-child(37) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.11), rgba(${Root.Color(color)}, 0.11));
    }
    &:nth-child(38) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.11), rgba(${Root.Color(color)}, 0.11));
    }
    &:nth-child(39) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.1), rgba(${Root.Color(color)}, 0.1));
    }
    &:nth-child(40) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.1), rgba(${Root.Color(color)}, 0.1));
    }
    &:nth-child(n + 40) > * > * > *:nth-child(2) {
        background-image: linear-gradient(rgba(${Root.Color(color)}, 0.09), rgba(${Root.Color(color)}, 0.09));
    }
`;
export const Tick = styled.div `
    font-size: 1em;
    position: relative;
    /* display: table; */
    display: flex;
    border-collapse: collapse;
    font-feature-settings: "tnum" on, "lnum" on;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    &:last-child {
        scroll-snap-align: end;
    }

    & > *:is(:only-child, :not(:last-child)) {
        display: table-row;
        width: 100%;

        & > * {
            display: flex;
            padding: 0.5em;
            transition: 0.3s ease;

            & > * {
                display: table-cell;
                text-align: right;
                vertical-align: middle;

                & > span {
                    font-size: 1.375em;
                }

                &:nth-child(1) {
                    position: relative;
                    min-width: 15%;
                    padding: 0.5em 1em;
                    padding-right: 2em;
                    text-align: right;
                    color: rgb(var(--white));

                    & > span {
                        position: absolute;
                        opacity: 0.6;
                    }
                }

                &:nth-child(2) {
                    font-feature-settings: initial;
                    background-position: right;
                    background-repeat: no-repeat;
                    width: -webkit-fill-available;
                    padding: 0.5em 2em;
                    transition: 0.3s ease;

                    &:nth-child(2) {
                        & > span {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }

    &:hover {
        & > * > *:first-child {
            background: rgba(var(--white), var(--o0045));
        }
    }
`;
export const Ticks = (color, show) => css `
    font-size: 1em;
    display: flex;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    transition: 0.3s ease;

    ${!show && `max-height: 0;`}

    & > ${Tick} {
        color: rgb(var(--${color}));
        ${Bar(color)}

        & > *:is(:only-child, :not(:last-child)) > * > * {
            &:nth-child(1) {
                & > span {
                    left: 0.5em;
                }
            }
        }
    }
`;
export const Asks = styled.div `
    flex-direction: column-reverse;
    ${({ $show }) => Ticks("red", $show)}

    &[data-update="true"] {
        animation: ${blink("red")} 0.5s ease-in-out infinite alternate;
    }
`;
export const Bids = styled.div `
    flex-direction: column;
    ${({ $show }) => Ticks("green", $show)}

    &[data-update="true"] {
        animation: ${blink("green")} 0.5s ease-in-out infinite alternate;
    }
`;
export const NoData = styled.div `
    display: flex;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
`;
const Responsive = (vertical) => css `
    flex-direction: row-reverse;

    ${Asks},${Bids} {
        flex-direction: column-reverse;
        &::-webkit-scrollbar {
            /* display: none; */
        }

        & > ${Tick} {
            & > *:is(:only-child, :not(:last-child)) > * {
                & > * {
                    padding: ${vertical ? "0.2em 0.5em" : "0.5em"};
                    & > * {
                        ${vertical && "position: relative;"}
                        ${vertical && "left:initial!important; right:initial!important;"}
                    }
                }
            }
        }

        & > *:not(${Tick}):only-child {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
    }

    ${Asks} {
        direction: rtl;

        ${Tick} {
            direction: ltr;
            & > *:is(:only-child, :not(:last-child)) > * {
                flex-direction: ${vertical ? "column-reverse" : "row-reverse"};

                & > * {
                    text-align: left;

                    &:nth-child(1) {
                        ${!vertical && "text-align: right;"}

                        &>span {
                            ${!vertical ? "left:initial; right: 0.5em;" : "left:0.5em;"}
                        }
                    }

                    &:nth-child(2) {
                        background-position: left;
                    }
                }
            }
        }
    }

    ${Bids} {
        ${Tick} {
            & > *:is(:only-child, :not(:last-child)) > * {
                direction: ltr;
                flex-direction: ${vertical ? "column-reverse" : "row"};

                & > * {
                    &:nth-child(1) {
                        ${!vertical && "text-align: left;"}

                        &>span {
                            ${!vertical ? "left:0.5em;" : "left:initial; right:0.5em;"}
                        }
                    }
                }
            }
        }
    }
`;
const Style = styled.div `
    font-size: 1em;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    ${({ $guidance }) => $guidance &&
    css `
            ${Asks},${Bids} {
                &:hover {
                    ${Tick} {
                        background: rgba(var(--white), var(--o0045));

                        &:hover {
                            background: rgba(var(--white), var(--o01));
                        }

                        &:hover ~ * {
                            background: transparent;
                        }
                    }
                }
            }
        `}

    ${({ $responsive }) => {
    const device = $responsive?.device;
    const vertical = $responsive?.vertical;
    switch (device) {
        case "laptop":
            return css `
                    @media all and (max-width: ${Root.Device.Laptop}px) {
                        ${Responsive(vertical)};
                    }
                `;
        case "tablet":
            return css `
                    @media all and (max-width: ${Root.Device.Tablet}px) {
                        ${Responsive(vertical)};
                    }
                `;
        case "mobile":
            return css `
                    @media all and (max-width: ${Root.Device.Mobile}px) {
                        ${Responsive(vertical)};
                    }
                `;
    }
}}
`;
export default Style;
//# sourceMappingURL=Orderbook.styled.jsx.map