@import "/UI/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;

        .labels {
            flex-direction: column;

            .label {
                &.hinttext {
                    font-size: 8px;
                }
            }
        }
    }

    .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");

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

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

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

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