@import "/UI/Core/Styles/Theme.scss";
@import "/UI/Core/Kit/Styles/UITokens.scss";

RoleButton {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    color: white;
    opacity: 1;
    transition: opacity 0.1s linear;

    &:intro {
        opacity: 0;
    }

    &:outro {
        opacity: 0;
    }

    .blocker {
        width: 38px;
        height: 30px;
        flex-shrink: 0;
    }

    .box {
        position: absolute;
        left: -27px;
        top: -23px;
        border-radius: $rounding;
        padding: 8px;
        flex-direction: row;
        align-items: flex-start;
        transition: opacity 0.2s linear;
        color: $traitor-red;

        .labels {
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
            //background-color: rgba( 0, 0, 0, 0.45 );
            padding: 2px;
            //backdrop-filter: $ui-backdrop;
            border-radius: 2px;
            //border: 1px solid $ui-color-border;
            //box-shadow: $ui-shadow;

            .role-button-title,
            .role-button-subtext,
            .role-button-hint {
                font-family: $ui-font-family;
                //line-height: 14px;
            }

            .role-button-title {
                font-size: 14px;
                font-weight: 900;
            }

            .role-button-subtext {
                font-size: 11px;
                font-weight: 900;
            }

            .role-button-hint {
                font-size: 12px;
                font-weight: 900;
                //letter-spacing: 0;
                //text-transform: none;
                //white-space: nowrap;
            }
        }
    }

    .icons {
        position: absolute;
        left: -15px;
        top: -15px;
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        border-radius: 0px;
        //transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
        //background-size: 32px;

        .icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background-image: url("ui/tbuttonhand.png");
            filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.65 ) );
            transition: filter 0.12s ease, opacity 0.12s ease;

            &.pressed {
                background-image: url("ui/tbuttonhandline.png");
            }
        }

        .iconoutline {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background-image: url("ui/tbuttonhandstroke.png");
        }
    }

    &.hover-target {

        .icon {
            filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.65 ) ) drop-shadow( 0 0 6px rgba( $traitor-red, 0.95 ) ) drop-shadow( 0 0 14px rgba( $traitor-red, 0.75 ) );
            animation: hovering-over 1s ease-out infinite;
        }
    }

    &.hovering {
        .box {
            opacity: 1;
        }
    }

    &.nothovering {
        .box {
            opacity: 0;
        }
    }
   
}

@keyframes hovering-over
{
    0%   { transform: translateX( 0px ) rotate(0deg); }
    50%  { transform: translateX( -2px ) rotate(-7deg); }
    100% { transform: translateX( 0px ) rotate(0deg); }
}