DifficultyPanel {
    position: relative;
    background-color: rgba(white, 0.015);
    backdrop-filter: blur(4px);
    font-family: "Poppins";
    color: white;
    font-size: 28px;
    justify-content: center;
    //align-items: center;
    //pointer-events: all;
    flex-direction: column;
    padding: 4px;
    width: 500px;
    height: 100px;
    background-image: url("/textures/ui/panel/difficulty_bg.png");
    background-position: center;
    background-size: 100% 100%;
    //border: 1px solid red;

    .top-row {
        flex-direction: row;
        padding: 4px;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .difficulty_label {
        //height: 60px;
        //color: #ffffffbb;
        font-size: 30px;
        font-weight: 600;
        align-content: center;
        text-shadow: 2px 3px 0px black;
    }

    .middle {
        flex-direction: column;
        align-items: center;
    }

    .description {
        text-align: center;
        //height: 30px;
        color: #ffffff88;
        font-size: 16px;
        font-weight: 500;
        align-content: center;
        justify-content: center;
        //margin-bottom: 30px;
        align-self: center;
    }

    .difficulty_button {
        //background-image: url("/textures/ui/panel/difficulty_button_decrease.png");
        //border: 1px solid blue;
        //label {
        //	font-family: "Cal Sans";
        //	text-align: center;
        //	position: relative;
        //	top: -3px;
        //}
    }

    .difficulty_decrease {
        position: relative;
        //background-color: #4CAF50;
        width: 48px;
        height: 48px;
        color: white;
        font-size: 64px;
        font-weight: 700;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: all;
        margin: 8px;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("/textures/ui/panel/difficulty_button_decrease.png");

        &:hover {
            background-image: url("/textures/ui/panel/difficulty_button_decrease_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/difficulty_button_decrease_active.png");
            sound-in: ui.button.press;
        }
    }

    .difficulty_increase {
        position: relative;
        //background-color: #4CAF50;
        width: 48px;
        height: 48px;
        color: white;
        font-size: 64px;
        font-weight: 700;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: all;
        margin: 8px;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("/textures/ui/panel/difficulty_button_increase.png");

        &:hover {
            background-image: url("/textures/ui/panel/difficulty_button_increase_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/difficulty_button_increase_active.png");
            sound-in: ui.button.press;
        }
    }

    InputHint.inputbutton {
        position: absolute;
        right: -16px;
        top: -16px;
        pointer-events: none;
        font-size: 15px;
        width: 36px;
        padding: 0px;
        opacity: 1;

        img {
            width: 100%;
            height: 100%;
            background-image-tint: rgba(255, 255, 255, 255);
        }
    }

    .difficulty_locked {
        position: relative;
        //background-color: #4CAF50;
        width: 48px;
        height: 48px;
        color: white;
        font-size: 64px;
        font-weight: 700;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
        pointer-events: all;
        margin: 8px;
        background-position: center;
        background-size: 100% 100%;
        background-image: url("/textures/ui/panel/difficulty_button_lock.png");

        &:hover {
            background-image: url("/textures/ui/panel/difficulty_button_lock_hover.png");
            sound-in: ui.button.over;
        }

        &:active {
            background-image: url("/textures/ui/panel/difficulty_button_lock_active.png");
            sound-in: error2; // todo: better sfx
        }
    }

    .disabled_button {
        background-color: #888888;
        opacity: 0.3;
        pointer-events: none;
        //cursor: not-allowed;
    }

    > i {
        margin-right: 8px;
    }
}