.mysterybox-extension {

    .mysterybox-container {
        max-width: 50px;
        max-height: 50px;
        width: 50px;
        height: 50px;

        background-color: rgba(28, 28, 32, 0.95);
        box-shadow: inset 0px 5px rgb(34 34 39 / 60%), inset 0 -4px rgb(18 18 21 / 60%);
        border-color: #5b5a57;
    }

    .box-image {
        width: 31px;
        height: 36px;
        position: relative;
        background-image: url('@/assets/images/mysterybox/mystery_box.png');
        -webkit-mask-image: url('@/assets/images/mysterybox/mystery_box.png');
        mask-image: url('@/assets/images/mysterybox/mystery_box.png');

        .chain-overlay-image {
            width: 31px;
            height: 36px;
            position: absolute;
            background-image: url('@/assets/images/mysterybox/chain_mysterybox_box_overlay.png');
        }
    }

    .key-image {
        width: 39px;
        height: 39px;
        position: relative;
        background-image: url('@/assets/images/mysterybox/mystery_box_key.png');
        -webkit-mask-image: url('@/assets/images/mysterybox/mystery_box_key.png');
        mask-image: url('@/assets/images/mysterybox/mystery_box_key.png');

        .key-overlay-image {
            width: 39px;
            height: 39px;
            position: absolute;
            background-image: url('@/assets/images/mysterybox/key_overlay.png');
        }
    }

    .box-image,
    .key-image {
        background-blend-mode: multiply;
        background-position: center;
        background-repeat: no-repeat;
    }
}
