@import "/ui/Hud/Style.scss";

SideButton {
    height: 100px;
    padding: 30px 20px;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    pointer-events: all; 
    z-index: 4;
    opacity: 0.8;
    background: linear-gradient(to right, rgba(black, 0.8) 0%, rgba(black, 0.7) 50%, rgba(black, 0) 100%);
    text-shadow: $text-shadow-sm;

    &.ltr {
        border-radius: 700px;
        background: linear-gradient(to left, rgba(black, 0.8) 0%, rgba(black, 0.2) 50%, rgba(black, 0) 100%);
        flex-direction: row-reverse;
        text-align: left;
    }

    image {
        aspect-ratio: 1;
        flex-shrink: 0;
        height: 65px;
        background-size: 100%;
        
        margin-left: 10px;
        margin-right: 20px;
        transition: all 0.2s ease-out;
    }

    .text-container {
        flex-direction: column;
        color: rgb(93, 255, 128);
        flex-shrink: 0;
        
        
        
        .text-title {
            transition: font-size 0.14s ease;
            color: darken(rgb(31, 189, 0), 0.1);
            font-family: Geneva;
            font-size: 35px;
            font-weight: 700;
        }

        .text-subtitle {
            transition: font-size 0.1s ease;
            font-size: 20px;
            color: darken(rgba(39, 255, 111, 0.678), 0.1);
            font-family: HabboExtended;
            margin-top: 5px;
        }
    }

    &:active:not(.disabled) {
        sound-in: 'light_click';
        background-color: rgb(250, 134, 39);
    }

    &:hover:not(.disabled) {
        cursor: pointer;
        opacity: 1;
        sound-in: 'hover';
        background-color: rgb(160, 160, 0);

        .text-container {
            .text-title {
                font-size: 37px;
                line-height: 35px;
            }
            
            .text-subtitle {
                font-size: 22px;
            }
        }

        image {
            height: 57px;
            margin-right: 15px;
            margin-left: 18px;
            
        }
    }

    &.disabled {
        opacity: 1.5;
    }
}