@import "./Slider.razor.scss";

/*

    -- Shared fonts --
    
    GrapeSoda
    Tecmo Bowl
    PixCon
    Lilian    

 */

.new-button {
    border: none;
    color: white;
    padding: 10px 20px;

    font-family: "Roboto";
    // font-size: 30px;
    // font-weight: bold;

    cursor: pointer;
    
    flex-shrink: 0;

    // border-radius: 10px;

    // flex-direction: column;

    flex-grow: 1;
    // width: 100%;

    gap: 0.2em;

    // align items vertically
    align-items: center;

    .icon {
        // font-size: 40px;
        margin-right: 10px;
    }

    background-color: rgba(0, 0, 0, 0.3);

    &.selected {
        background-color: rgba(39, 145, 25, 0.5);
    }

    small {
        font-size: 20px;
        font-weight: normal;
    }

    strong {
        font-weight: bold;
    }

    &.disabled {
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
    }

    &.error {
        background-color: rgba(228, 21, 21, 0.3);
    }
    
    &.small {
        font-size: 20px;
    }

    &:not(.disabled) {

        &:hover, &:focus, &.focused {
           // background-color: rgba(0, 0, 0, 0.5);
            sound-in: "sounds/menu/button-hover.sound";
        }

        &:active {
            sound-in: "sounds/menu/button-click.sound";
        }

        /*&.error {
            &:hover, &:focus, &.focused {
                background-color: rgba(228, 21, 21, 0.5);
            }
        }

        &.selected {
            &:hover, &:focus, &.focused {
                background-color: rgba(39, 145, 25, 0.7);
            }
        }

        // extra visible for key input
        &.focused {
            // background-color: rgba(0, 0, 0, 0.7);
            border-color: black;
            // box-shadow: 0 0 0 2px white;
        }*/
    }

    &.retro {
        font-family: "Tecmo Bowl";
        font-smooth: never;
        // background-image: linear-gradient(-90deg, #4f7de0, #1f3a73);

        background-image: url("/ui/button-greyscale.png");
        // background-size: contain;
        background-repeat: repeat-x;
        
        border-radius: 10px;
        border: 5px solid white;
        // border-image: url("/ui/border.png") 4 slice;
        // border-color: white;
        
        text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
        
        background-image-tint: #719bfa;
        
        background-color: #303c6c;
        
        &.icon-button {
            align-content: center;
            justify-content: center;
            align-items: center;
            font-size: 40px;
        }

        &:hover {
            // background-image: linear-gradient(-90deg, #5c8eeb, #2c4b8a);
            background-image-tint: #c0d5ff;
            background-position-x: 4px;
            background-color: #56566e;
        }

        &.success, &.selected {
            // background-image: linear-gradient(-90deg, #73e04f, #3a731f);
            background-image-tint: #73e04f;
            background-color: #315a1d;

            &:hover {
                // background-image: linear-gradient(-90deg, #86eb63, #4c8a2f);
                // background-image: url("/ui/button-green.png");
                // backdrop-filter: brightness(1.5);
                background-image-tint: #a3ef88;
                // backdrop-filter: saturate(80%);
                background-color: #486137;
            }
        }

        &.danger {
            // background-image: linear-gradient(-90deg, #e04f4f, #731f1f);
            background-image-tint: #e04f4f;

            &:hover {
                // background-image: linear-gradient(-90deg, #eb6363, #8a2f2f);
                background-image-tint: #eb6363;
            }
        }

        &.disabled {
            // background-image: linear-gradient(-90deg, #a0a0a0, #505050);
            background-image-tint: #a0a0a0;
            border-color: #999;
            color: #999;
            background-color: #473e42;           

            &:hover {
                // background-image: linear-gradient(-90deg, #a0a0a0, #505050);
                background-image-tint: #a0a0a0;
                background-color: #473e42;
            }
        }
        
        &.focused {
            border-color: yellow;
            // border-style: double;
            // outline: 5px solid red;
        }
    }

    &.list-button {
        // font-family: "GrapeSoda";
        // font-size: 30px;
        padding: 20px 40px;
        width: 100%;
        flex-grow: 1;
    }

}

@keyframes letterbob {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0px);
    }
}

wavebutton.selected {
    label {
        animation: letterbob 1s ease-in-out infinite;
    }
}

.content-box, .info-box {
    background-image: url("/ui/background-greyscale.png");
    background-repeat: repeat-x;
    background-color: #ebf0f6;
    
    overflow: hidden;
    
    &.blue {
        background-image-tint: #719bfa;
        background-color: #6792f1;
    }

    &.purple {
        background-image-tint: #8614c3;
        background-color: #7b12bc;
    }

    h2.header {
        font-size: 60px;
        font-weight: bold;
        font-family: "Lilian";
        font-smooth: never;
        
        flex-shrink: 0;

        // color: linear-gradient(90deg, #fff, #aaa);
        // background-image: url("/ui/background-greyscale.png");
        mask-image: url("/ui/text-greyscale2.png");
        mask-position: 0 5px;
        
        text-shadow: 4px 4px 0 #053250;
    }

    h3.header {
        font-size: 40px;
        font-weight: bold;
        font-family: "Lilian";
        font-smooth: never;
        
        flex-shrink: 0;

        // color: linear-gradient(90deg, #fff, #aaa);
        // background-image: url("/ui/background-greyscale.png");
        mask-image: url("/ui/text-greyscale2.png");
        mask-position: 0 5px;
        
        text-shadow: 4px 4px 0 #053250;
    }
    
}

.content-box {
    &.padded {
        padding: 20px;
    }
    
    &.border {
        border: 5px solid white;
        border-radius: 10px;
    }
}

.info-boxes {
    position: absolute;
    
    top: 50px;
    right: 50px;
    bottom: 50px;
    
    flex-direction: column;
    gap: 20px;
    
    &.align-left {
        right: auto;
        left: 50px;
        
        .info-box {
            align-items: flex-start;
            justify-content: flex-start;
        }

    }

    &.horizontal {
        flex-direction: row;
        gap: 20px;

        .info-box {
            align-items: flex-start;
            justify-content: flex-start;
        }
    }

    .info-box {

        color: white;
        font-size: 25px;

        width: 500px;
        flex-direction: column;

        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;

        // background-color: rgba(0, 0, 0, 0.5);
        // backdrop-filter: blur(1px);

        padding: 20px;

        gap: 10px;

        // background-image: linear-gradient(90deg, #4f7de0, #1f3a73);
        background-image: url("/ui/background-greyscale.png");
        background-repeat: repeat-x;
        
        // background-image-tint: #719bfa;
        // background-color: #6792f1;
        background-image-tint: #8614c3;
        background-color: #7b12bc;
        
        border: 5px solid white;
        border-radius: 10px;
        
        font-smooth: never;
        
        font-family: "Tecmo Bowl";
        
        text-shadow: 4px 4px 0 #053250;
        
        label {
            mask-image: url("/ui/text-greyscale2.png");
            // mask-position: 0 5px;
        }

        ul {
            flex-direction: column;
            gap: 10px;
            width: 100%;

            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 30px;

                strong {
                    font-weight: bold;
                }
            }
        }

        table {
            flex-direction: column;
            width: 100%;
        }

        column {
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            /*&.grow {
                flex-grow: 1;
            }*/

            gap: 10px;

            /*&.rank {
                font-weight: bold;
                // font-size: 15px;
            }*/
        }

        row {
            display: flex;
            flex-direction: row;
            // justify-content: space-between;
            // align-items: center;
            gap: 10px;

            /*&.me {
                color: yellow;
            }*/
        }
        
        .buttons {
            flex-direction: row;
            gap: 20px;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            margin: 20px 0;

            &:last-child, &:first-child {
                margin-bottom: 0;
            }
        }

    }
}

.buttons {
    flex-direction: row;

    &.gap {
        gap: 20px;
    }
}

column {
    flex-direction: column;
}

row {
    flex-direction: row;
}

.dithered {
    font-smooth: never;
    label {
        mask-image: url("/ui/text-greyscale2.png");
        // mask-position: 0 5px;
    }
}

h2.dither-header {
    font-size: 60px;
    font-weight: bold;
    font-family: "Lilian";
    font-smooth: never;
    
    // color: linear-gradient(90deg, #fff, #aaa);
    // background-image: url("/ui/background-greyscale.png");
    mask-image: url("/ui/text-greyscale2.png");
    mask-position: 0 5px;
}

dropdown {
    border: 5px solid white;
    border-radius: 10px;
    padding: 20px;
    gap: 10px;
    font-family: "Tecmo Bowl";
    font-smooth: never;
    font-size: 30px;
    color: white;
    text-shadow: 4px 4px 0 #053250;
    cursor: pointer;

    background-image: url("/ui/button-greyscale.png");
    background-repeat: repeat-x;
    background-image-tint: #719bfa;
    background-color: #303c6c;
    
    label {
        mask-image: url("/ui/text-greyscale2.png");
        // mask-position: 0 5px;
    }
    option {
        display: none;
    }
}

/*
popup, .popup-panel, {
    font-family: "Tecmo Bowl";
}*/

.scroll-container {
    overflow: hidden;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

.scroll-content {
    overflow: scroll;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    flex-grow: 1;
    max-height: 100%;
}