@import '../../common/styles/button-base';
@import '../../common/styles/_abstract-icon';
@import '../../common/styles/colors';

@socials: dnr, esia, fb, gplus, instagram, mail, ok, telegram, twitter, vk, more, viber, dzen;

@social-icon-position-original: 0;
@social-icon-position-outlined: 1;

@horizontal-margin: (@control-height-scale-medium - @icon-size-24) / 2;
@vertical-margin: (@control-height-scale-medium - @icon-size-24) / 2;

@button-color: @color-white;

.social-icon-set-background-image(@type,@version: '') {
    @root: 'icons/';
    @icon-type: ~'@{type}';
    @icon-version: ~'@{version}';

    background-image: url('@{root}@{icon-type}-socialicon.svg@{icon-version}');
}

.social-icon-create-views(@views) {
    .social-icon-view(@views, length(@views));
}

.social-icon-view(@views, @position) when (@position > 0) {
    .social-icon-view(@views, @position - 1);

    @social: extract(@views, @position);
    @social-modification: ~'_@{social}';

    &@{social-modification} {
        &::after {
            .social-icon-set-background-image(@social, @version: '?02022023');

            @social-icon-offset: @icon-size-24 * @social-icon-position-original;

            background-position: -@social-icon-offset 0;
        }
    }
}

.bloko-social-icon {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    border-radius: 50%;
    background-color: @button-color;
    position: relative;
    border: @button-border-width solid @color-gray-30;
    padding: 0;

    min-width: @control-height-scale-medium;
    height: @control-height-scale-medium;

    &::after {
        box-sizing: border-box;
        content: '';
        position: absolute;
        top: -@button-border-width;
        left: -@button-border-width;
        width: @icon-size-24;
        height: @icon-size-24;
        margin: @horizontal-margin @vertical-margin;
        background-size: cover;
    }

    .social-icon-create-views(@socials);
}

.bloko-social-icon_outlined {
    background-color: transparent;

    &::after {
        @social-icon-offset: @icon-size-24 * @social-icon-position-outlined;

        background-position: -@social-icon-offset 0;
    }
}

.bloko-social-icon_button {
    cursor: pointer;

    &:active {
        &::after {
            top: -@button-border-width + @_button-active-padding;
        }
    }

    &:not(.bloko-social-icon_outlined) {
        &:hover {
            ._button-hover-color-property(background-color, @button-color);
        }

        &:active {
            box-shadow: @_button-active-box-shadow;
            ._button-active-color-property(background-color, @button-color);
        }
    }

    &.bloko-social-icon_outlined {
        &:hover {
            border-color: @color-white;
        }
    }
}