// @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap");

:root {
    --primaryBackground: #f0fdfa;
    --secondaryBackground: #d8f4ef;
    --elementsBackground: rgba(2, 107, 121, 0.568);
    --highlightedBackground: rgba(2, 107, 121, 0.568);

    --foreground: #212121;
    --elementsForeground: #d8f4ef;
    --headerForeground: #212121;

    --shade: rgba(120, 139, 138, 0.575);
    --textShade: rgba(107, 107, 107, 0.349);
    --heavyShade: rgba(2, 107, 121, 1);

    --error: #ff0000;
    --warning: var(--elementsBackground);

    --outgoingTxForeground: #b76a6a;
    --incomingTxForeground: #6d8b6d;

    --popupBackground: var(--elementsForeground);
    --popupForeground: var(--foreground);
}

#liquidwallet {
    position: relative;
    margin: 0;

    background: var(--primaryBackground);
    color: var(--foreground);
    font-size: 1.1rem;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    height: fit-content;
    min-height: 100%;
    width: 100%;
    text-shadow: 0px 0px 4px var(--textShade);
    overflow: auto;
    height: 100%;
    align-items: center;
    justify-content: center;
    user-select: none;

    @media (orientation: landscape) {
        height: 100%;
    }

    * {
        overflow: hidden;
        overflow: clip;
    }

    .alertContainer {
        position: fixed;
        max-height: 100%;
        overflow: hidden;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        display: flex;
        flex-direction: column;
    }

    .alert {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.6rem;
        font-size: 1rem;
        padding: 1rem;
        border-radius: 10px;
        color: var(--foreground);
        opacity: 1;
        transition: opacity 0.5s ease;
        background-color: var(--popupBackground);
        margin-top: 0.3rem;
        text-align: center;
        > :nth-child(1) {
            margin-top: 0.5rem;
        }
        &.error {
            color: var(--headerForeground);
            background-color: var(--error);
        }

        &.fatal {
            color: var(--headerForeground);
            background-color: var(--error);
        }
    }

    .fadeOut {
        opacity: 0 !important;
    }

    .fadeIn {
        opacity: 1 !important;
    }

    .cover {
        z-index: -1;
    }

    /*icon container*/
    .iconCnt {
        position: relative;
    }

    /*element with a cover*/
    .withCover {
        position: relative;
    }

    .left {
        text-align: left;
    }

    .center {
        text-align: center;
    }

    .right {
        text-align: right;
    }

    .list.h.center {
        justify-content: center !important;
    }
    .list.h.top {
        align-items: start !important;
    }

    .list.v.center {
        align-items: center !important;
    }
    .list.v.top {
        justify-content: flex-start !important;
    }

    .list.v.bottom {
        justify-content: flex-end !important;
    }

    .list.h.bottom {
        align-items: end !important;
    }

    .material-symbols-outlined {
        font-size: inherit;
    }

    .disablePointerEvents {
        pointer-events: none;

        &.clickable {
            pointer-events: auto;
        }
    }

    .disabled {
        pointer-events: none !important;
        filter: grayscale(0.9);
    }

    .sep.v {
        margin-top: 2rem !important;
        min-width: 1px;
    }

    .inputSlide {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 !important;
        padding-bottom: 1.2rem !important;
        position: relative;
        .label {
            position: absolute;
            color: var(--foreground);
            font-size: 0.8rem;
            text-align: center;
            bottom: 0;

            white-space: nowrap;
            transform: translateX(-50%);
        }

        .label:first-of-type {
            transform: translateX(0%);
        }

        .label:last-of-type {
            transform: translateX(-100%);
        }

        .slider {
            flex-grow: 1;
            padding: 0;
            margin: 0;
            border-radius: 20px;

            padding-left: 0.5rem;
            padding-right: 0.5rem;
            height: 2rem;
            background: var(--elementsBackground);
            border: none;
            outline: none;
            -webkit-appearance: none;
            overflow: visible;
        }

        .slider::-moz-range-thumb {
            width: 1.5rem;
            height: 1.5rem;
            background: var(--elementsForeground);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0px 0px 4px var(--heavyShade);
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 1.5rem;
            height: 1.5rem;
            background: var(--elementsForeground);
            border-radius: 50%;
            box-shadow: 0px 0px 4px var(--heavyShade);
            cursor: pointer;
        }

        .slider::-moz-range-thumb,
        .slider::-webkit-slider-thumb {
            box-shadow: 0px 0px 4px var(--heavyShade);
            // other styles...
            z-index: 2; // make sure the thumb is above the track
        }
    }

    .titleBig {
        font-weight: bold;
        font-size: 4rem;

        @media (max-width: 600px) {
            font-size: 3.5rem;
        }
    }

    .sub,
    .small {
        font-size: 0.9rem;
    }

    .sub {
        letter-spacing: 0.06rem;
        font-style: italic;
    }

    .smaller {
        font-size: 0.8rem;
    }

    .clickable {
        cursor: pointer;
    }

    .title {
        font-weight: bold;
        font-size: 1.2rem;
    }

    .input input {
        all: unset;
        caret-color: var(--elementsForeground);
        font-style: italic;
        text-align: center;
        font-weight: bold;
        border: 0;
        background: none;
        padding: 0;
        margin: 0;
        font-size: 0.8rem;
        color: var(--elementsForeground);
        text-decoration: dotted underline;
        width: 100%;
        height: 100%;
    }

    select,
    .input {
        // padding: 1rem !important;
        background-color: var(--elementsBackground);
        color: var(--elementsForeground);
        border-radius: 14px;
        border: none;
        box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.3);
    }

    .input {
        height: 3rem;
        cursor: text;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .select .selection {
        width: 100%;
        text-align: center;
    }

    .select .expand {
        font-size: 3rem;
        font-weight: bold;
        padding: 0;
    }

    button {
        box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
        border-radius: 14px;
        border: none;
        background-color: var(--elementsBackground);
        color: var(--elementsForeground);
        font-weight: bold;
        font-size: 1rem;
        text-align: center;
        cursor: pointer;
        padding: 1rem;
        text-align: center;
        align-items: center;
        justify-content: center;

        &.withIcon {
            display: flex;
            flex-direction: column;
            margin: 0.3rem;
            padding: 1rem !important;

            .icon {
                margin-bottom: 0rem;
                font-size: 3rem;
            }
        }

        &.small {
            box-shadow: none;
            border-radius: 8px;
            padding: 0.4rem;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 0.8rem;
        }
    }

    button.selectBtn {
        display: flex;
        box-shadow: none;
    }

    #logo {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 99;
        align-items: center;
        justify-content: center;
        background-color: var(--heavyShade);

        .cover {
            width: min(90vw, 256px);
            height: min(90vw, 256px);

            margin: auto;
            top: 0;
            z-index: 99;
            left: 0;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 0.8;
            pointer-events: none;
        }
    }

    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--elementsBackground);
        font-size: 2rem;
        padding: 1rem;
        padding-right: 1rem;
        padding-left: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 2rem !important;
        color: var(--headerForeground);
        font-weight: bold;

        * {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        & > *:first-child {
            margin-right: 2rem;
        }

        & > *:last-child {
            margin-left: auto;
        }

        .cover {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 99;
            left: 0;
            background-size: cover;
            background-position: 50% 80%;
            filter: blur(50px);
            opacity: 0.8;
            pointer-events: none;
        }
    }

    .list {
        column-gap: 0.3rem;
        row-gap: 0.2rem;
    }

    #container {
        width: 100%;
        height: 100%;
        display: inline-flex;
        flex-direction: column;
        padding: 0.4rem;
        padding-top: 5rem;
        margin: 0;
        flex-shrink: 1;
        overflow: auto;
        max-width: 1600px;

        // justify-content: center;
        @media (orientation: landscape) {
            flex-direction: row;

            & > :not(.popup) {
                flex-shrink: 1;
                width: 100%;
            }

            .list.h.fill {
                & > :not(.popup) {
                    flex-shrink: 1;
                    width: 100%;
                }
            }
        }

        .icon {
            &.img {
                width: 100%;
            }
        }

        .error {
            padding: 1.2rem;
            font-size: 1rem;
            font-weight: bold;
            text-align: center;
            border: 2px dotted var(--error);
            border-radius: 6px;
            margin: 1rem !important;
            margin-right: 1rem !important;
            margin-left: 1rem !important;
            margin-left: 2rem !important;
            margin-right: 2rem !important;
            color: var(--error);
        }

        .warning {
            font-size: 1rem;

            font-weight: bold;
            padding: 1rem;
            text-align: center;
            border: 2px dotted var(--warning);
            border-radius: 6px;
            margin: 1rem !important;

            color: var(--warning);
        }

        .cover {
            width: 100%;
            height: 100%;
            position: absolute;
            pointer-events: none;
            background-repeat: no-repeat;
            background-size: 140%;
            background-position: 120% center;
            filter: blur(40px);
            opacity: 0.8;
        }

        .toolong {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        h1 {
            font-weight: bold;
            text-shadow: 0px -2px 1px var(--shade);
            font-size: 1.6rem;
            text-align: center;
            width: 100%;
            text-transform: uppercase;
            padding: 2rem;
            padding-bottom: 1rem;
            color: var(--foreground);
        }

        .buttons {
            filter: drop-shadow(1px 20px 18px rgba(0, 0, 0, 0.3));
        }

        .iconCnt {
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
                flex-shrink: 1;
            }

            &.big .icon {
                max-width: 3rem;
                width: 3rem;
                font-size: 3rem;
            }
        }

        .popupSelect {
            padding: 0;
            display: flex;
            justify-content: stretch;
        }

        .popupSelect button {
            justify-content: flex-start;
            flex-direction: row;
            align-items: center;
            // height: 4rem;
            flex-grow: 1;
            // width: 100%;
            display: flex;
            // padding: 0.6rem;
            height: 3.6rem;
            margin-top: 2px;
            box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.3);
            .secondaryLabel {
                margin-left: auto;
            }

            .iconCnt {
                margin: 0;
                padding: 0;
                width: 2rem;
                margin-right: 1rem;
                font-size: 2rem;
                /* position: absolute;
                                    left:1rem; */
            }
        }

        .popup {
            width: 90vw;
            display: flex;
            background: var(--popupBackground);
            height: min(80vh, 50rem);
            overflow-y: auto;
            z-index: 99;
            flex-direction: column;
            position: fixed;
            bottom: 0vh;
            border-radius: 6px;
            right: calc(5vw);
            justify-content: flex-start !important;
            align-items: stretch !important;
            backdrop-filter: blur(6px);
            padding: 1rem;
            padding-left: 2rem;
            padding-right: 2rem;

            &.popupSelect {
                button {
                    flex-grow: 0;
                }
            }

            filter: drop-shadow(6px 6px 6px var(--elementsBackground));

            & > * {
                flex-shrink: 0;
                margin: 0.5rem !important;
            }

            h1 {
                color: var(--popupForeground);
            }

            @media (orientation: landscape) {
                right: 10vw;
                height: 70vh;
                bottom: 10vh;
                width: 80vw;
            }
        }

        .list {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;

            &.outscroll {
                padding-right: 0.2rem;
                padding-left: 0.2rem;
            }
            &.outscroll > * {
                flex-shrink: 0;
            }

            // column-gap: 0.2rem;

            & > * {
                align-items: stretch;
                margin-top: 0.1rem;
                margin-bottom: 0.1rem;
            }

            .bottom {
                margin-left: 0.7rem;
                margin-right: 0.7rem;
                margin-top: auto;
                margin-bottom: 0.4rem;
            }

            &.highlight {
                & > * {
                    border-radius: 14px;
                    box-shadow: 2px 5px 2px rgba(0, 0, 0, 0.3);
                    margin-top: 5px;
                    margin-bottom: 5px;
                }
            }

            &.h {
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
                // all but first child

                &.outscroll {
                    overflow-x: auto;
                    overflow-y: hidden;
                    overflow-y: clip;
                    max-width: 100%;
                    flex-shrink: 1;
                }

                &.fill {
                    /* flex-direction: column; */
                    /* align-items: stretch; */
                    justify-content: stretch;

                    & > * {
                        flex-shrink: 0;
                        flex-grow: 1;
                    }
                }
            }

            &.v {
                max-width: 100%;
                /* width:100%; */
                min-width: 100%;
                justify-content: center;
                align-items: center;
                justify-content: flex-start;

                &.fill {
                    /* flex-direction: column; */
                    /* align-items: stretch; */
                    align-items: stretch;

                    & > * {
                        flex-shrink: 0;
                        // flex-grow: 1;
                    }
                }

                // .fill {
                //     flex-shrink: 0;
                //     flex-grow: 1;

                // }
                @media (orientation: landscape) {
                    &.v.outscroll {
                        overflow-x: hidden;
                        overflow-x: clip;
                        overflow-y: auto;
                        flex-shrink: 1;
                        max-height: 100%;
                    }
                }
            }
        }
    }

    #globalMessage {
        position: fixed;
        pointer-events: none;
        z-index: 99;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 4px #000;
        font-size: 2rem;
        color: purple;
    }

    #sendOK {
        align-items: center !important;
        justify-content: center !important;
        font-size: 42vh !important;
    }
}

@import "./stages/send.less";
@import "./stages/receive.less";
@import "./stages/wallet.less";
@import "./stages/options.less";