@charset "UTF-8";
@use "../../core/jkl";

@layer jokul.components {
    .jkl-icon-button {
        background-color: transparent;
        cursor: pointer;
        color: inherit;
        position: relative;
        transition-property: box-shadow;
        padding: 0;

        @include jkl.motion(focus, snappy);
        @include jkl.reset-outline;

        .jkl-icon {
            display: flex;
            align-items: center;

            &--animated {
                display: revert;
            }
        }

        &:focus-visible {
            @include jkl.focus-outline;
        }

        &:hover {
            color: var(--jkl-color-text-interactive-hover);
        }

        @include jkl.forced-colors-mode {
            border: none;
            background: none;
        }
    }
}