@charset "UTF-8";
@use "../../jkl";
@use "./base-styles" as *;

@layer jokul.components {
    .jkl-icon {
        --jkl-icon-fill: 0;

        @include base-styles;

        &--filled {
            --jkl-icon-fill: 1;
        }

        &--animated {
            display: block;
        }
    }

    .jkl-icon-red-cross {
        color: var(--jkl-color-error-background-contrast);
    }

    .jkl-icon-green-check {
        color: var(--jkl-color-success-background-contrast);
    }

    .jkl-animated-horizontal-arrows,
    .jkl-animated-vertical-arrows {
        overflow: hidden;
        width: 1.3em;
        height: 1.3em;

        &__slider {
            display: flex;

            @include jkl.motion(standard, expressive);
            transition-delay: calc(#{jkl.timing("expressive")} * (1 / 3));
            transition-property: transform;
        }

        &__arrow {
            flex-shrink: 0;
        }
    }

    .jkl-animated-vertical-arrows__slider {
        flex-direction: column;
        height: calc(1.3em * 2);

        &[data-show="up"] {
            transform: translate3d(0, 0, 0);
        }

        &[data-show="down"] {
            transform: translate3d(0, -50%, 0);
        }
    }

    .jkl-animated-horizontal-arrows__slider {
        flex-direction: row;
        width: calc(1.3em * 2);

        &[data-show="left"] {
            transform: translate3d(0, 0, 0);
        }

        &[data-show="right"] {
            transform: translate3d(-50%, 0, 0);
        }
    }

    .jkl-icons-animated__plus {
        @include jkl.motion("easeInBounceOut", "expressive");
        transition-property: transform;
        transform-origin: 50% 50%;

        &--plus {
            transform: rotate(0);
        }

        &--close {
            transform: rotate(135deg);
        }
    }
}