@import '../../../common/variables';

.be-faces {
    .be-face-wrapper {
        position: relative; // For delete and minus icons
        display: inline-block;
        margin: 0 10px 10px 0;
    }

    .btn-plain.be-face {
        overflow: hidden;
        border-radius: 100%;

        img {
            @include bdl-transition($bdl-transitionDurationBase * 2, transform);

            width: 45px;
            height: 45px;
            object-fit: cover;
            vertical-align: middle;
            filter: brightness(1.5);
        }

        .icon-minus {
            position: absolute;
            top: 16px;
            left: 16px;
            display: none;
        }

        &:hover {
            img {
                transform: scale(1.3);
            }

            .icon-minus {
                display: initial;
            }
        }
    }

    .be-face-unselected .btn-plain.be-face img {
        opacity: .4;
        filter: none;
    }

    .btn-plain.be-face-delete {
        position: absolute;
        top: -3px;
        right: -5px;
        height: 18px;
        padding: 0;
        background-color: white;
        border: 1px solid $bdl-gray-50;
        border-radius: 100%;
        box-shadow: 0 0 2px 0 $darker-black;
    }

    &.be-faces-is-editing {
        .btn-plain.be-face:hover img {
            transform: none;
            cursor: default;
        }
    }
}