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

RoleButton {
    position: absolute;
    color: white;
    opacity: 1;
    transition: opacity 0.1s linear;

    &:intro {
        opacity: 0;
    }

    &:outro {
        opacity: 0;
    }

    .blocker {
        top: 8px;
        width: 38px;
        height: 30px;
    }

    .box {
        border-radius: $rounding;
        padding: 8px;
        transition: opacity 0.2s linear;
        color: $traitor-red;

        .labels {
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;

            label {
                line-height: 14px;
                //text-stroke-width: 4px;
                //text-stroke-color: rgba( 0, 0, 0, 0.2 );
                //text-shadow: 2px 2px 3px rgba( 0, 0, 0, 0.6 );

                &:first-child {
                    font-size: 13px;
                    font-weight: 700;
                }

                &.subtext {
                    font-size: 11px;
                    font-weight: 500;
                }

                &.hinttext {
                    font-size: 10px;
                    font-weight: 900;
                    letter-spacing: 0.8px;
                    text-transform: uppercase;
                    white-space: nowrap;
                }
            }
        }
    }

    .icons {
        top: 8px;
        margin: 8px;
        position: absolute;
        background-repeat: no-repeat;
        //background-size: 32px;

        .icon {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url("ui/tbuttonhand.png");
            transition: filter 0.12s ease, opacity 0.12s ease;

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

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

    &.hover-target {
        .icon {
            filter: drop-shadow( 0 0 5px rgba( $traitor-red, 0.45 ) ) drop-shadow( 0 0 10px rgba( $traitor-red, 0.2 ) );
        }
    }

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

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