@import 'commons';

.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-bold,
        &.m--is-skin-dark {
            &::before {
                transition: width $m-transition-duration ease, height $m-transition-duration ease, opacity $m-transition-duration-sm 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: $m-color-grey-light;

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

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

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

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

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

            &.m-textfield__search-icon {
                color: $m-color-interactive;

                &:hover {
                    color: $m-color-white;
                    stroke-width: 2;
                }

                &::before {
                    background: $m-color-interactive;
                    border-radius: 0 3px 3px 0;
                    width: $m-touch-size;
                    height: $m-touch-size;
                    transition-delay: 0s;
                }

                &:hover,
                &:active,
                &:focus {
                    &::before {
                        opacity: 1;
                    }
                }
            }
        }

        &.m--is-skin-bold {
            stroke-width: 3;
        }

        &.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,
        &.m--is-skin-bold {
            cursor: default;
            color: $m-color-disabled;

            &.m-textfield__search-icon {
                color: $m-color-interactive;
            }
        }

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

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

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

    &.m-textfield__reset {
        stroke-width: 2px;
    }

    &__icon {
        position: relative;

        @include m-is-ie() {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0);
        }
    }

    &__hidden {
        @include m-visually-hidden;
    }
}