<commit_before>@import 'abstracts/variables';

.m-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50%;

    &:active,
    &:focus {
        outline: none;
    }

    &:not(.m--is-disabled) {
        &.m--has-ripple {
            &::before {
                content: '';
            }
        }

        &.m--is-skin-light,
        &.m--is-skin-link,
        &.m--is-skin-dark {
            &::before {
                transition: width $m-transition-duration ease, height $m-transition-duration ease, opacity $m-transition-duration--s linear;
                transition-delay: 0.3s;
                transform: translate(-50%, -50%);
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 0;
                display: block;
                width: $m-touch-size / 2;
                height: $m-touch-size / 2;
                border-radius: 50%;
                opacity: 0;
            }

            &:active,
            &:focus {
                &::before {
                    opacity: 1;
                    transition-delay: 0s;
                    width: $m-touch-size;
                    height: $m-touch-size;
                }
            }
        }

        &.m--is-skin-dark {
            color: rgba($m-color--white, 0.6);

            &:hover {
                color: $m-color--white;
            }

            &::before {
                background: $m-color--grey-darker;
            }
        }

        &.m--is-skin-light {
            color: $m-color--grey-dark;

            &:hover {
                color: $m-color--black;
            }

            &::before {
                background: $m-color--interactive-lightest;
            }
        }

        &.m--is-skin-link {
            color: $m-color--interactive;
            stroke-width: 2;

            &:hover,
            &:focus {
                color: $m-color--interactive-light;
            }

            &:active {
                color: $m-color--interactive-dark;
            }

            &::before {
                background: $m-color--interactive-lightest;
            }
        }

        &.m--is-skin-primary,
        &.m--is-skin-secondary {
            @include m-button--hover();
        }

        &.m--is-skin-primary {
            @include m-button--primary();
        }

        &.m--is-skin-secondary {
            @include m-button--secondary();
        }
    }

    &.m--is-disabled {
        &.m--is-skin-light,
        &.m--is-skin-link,
        &.m--is-skin-dark {
            cursor: not-allowed;
            color: $m-color--disabled;
        }

        &.m--is-skin-primary,
        &.m--is-skin-secondary {
            @include m-button--disabled();
        }
    }

    &.m--is-skin-light,
    &.m--is-skin-link,
    &.m--is-skin-dark {
        transition: color $m-transition-duration ease;
        padding: 0;
        cursor: pointer;
        border: none;
        background: transparent;
    }

    &.m--is-skin-primary,
    &.m--is-skin-secondary {
        @include m-button();
    }

    &__icon {<commit_msg>MODUL-132: add padding 0 (#215)<commit_after>@import 'abstracts/variables';

.m-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
    border-radius: 50%;
    padding: 0;

    &:active,
    &:focus {
        outline: none;
    }

    &:not(.m--is-disabled) {
        &.m--has-ripple {
            &::before {
                content: '';
            }
        }

        &.m--is-skin-light,
        &.m--is-skin-link,
        &.m--is-skin-dark {
            &::before {
                transition: width $m-transition-duration ease, height $m-transition-duration ease, opacity $m-transition-duration--s linear;
                transition-delay: 0.3s;
                transform: translate(-50%, -50%);
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 0;
                display: block;
                width: $m-touch-size / 2;
                height: $m-touch-size / 2;
                border-radius: 50%;
                opacity: 0;
            }

            &:active,
            &:focus {
                &::before {
                    opacity: 1;
                    transition-delay: 0s;
                    width: $m-touch-size;
                    height: $m-touch-size;
                }
            }
        }

        &.m--is-skin-dark {
            color: rgba($m-color--white, 0.6);

            &:hover {
                color: $m-color--white;
            }

            &::before {
                background: $m-color--grey-darker;
            }
        }

        &.m--is-skin-light {
            color: $m-color--grey-dark;

            &:hover {
                color: $m-color--black;
            }

            &::before {
                background: $m-color--interactive-lightest;
            }
        }

        &.m--is-skin-link {
            color: $m-color--interactive;
            stroke-width: 2;

            &:hover,
            &:focus {
                color: $m-color--interactive-light;
            }

            &:active {
                color: $m-color--interactive-dark;
            }

            &::before {
                background: $m-color--interactive-lightest;
            }
        }

        &.m--is-skin-primary,
        &.m--is-skin-secondary {
            @include m-button--hover();
        }

        &.m--is-skin-primary {
            @include m-button--primary();
        }

        &.m--is-skin-secondary {
            @include m-button--secondary();
        }
    }

    &.m--is-disabled {
        &.m--is-skin-light,
        &.m--is-skin-link,
        &.m--is-skin-dark {
            cursor: not-allowed;
            color: $m-color--disabled;
        }

        &.m--is-skin-primary,
        &.m--is-skin-secondary {
            @include m-button--disabled();
        }
    }

    &.m--is-skin-light,
    &.m--is-skin-link,
    &.m--is-skin-dark {
        transition: color $m-transition-duration ease;
        cursor: pointer;
        border: none;
        background: transparent;
    }

    &.m--is-skin-primary,
    &.m--is-skin-secondary {
        @include m-button();
    }

    &__icon {
{'fraction_non_alphanumeric': 0.1493205682520074, 'fraction_numerical': 0.008492896849907351, 'mean_word_length': 1.0202744853399874, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7476734', 'n_tokens_mistral': 2063, 'n_tokens_neox': 1911, 'n_words': 306}