@use "../../spacing/index.scss" as *;
@use "../../motion/index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-checkpoint--layout-base() {
    .k-checkpoint {
        width: 100%;
        display: flex;
        align-items: center;
        gap: $kendo-checkpoint-gap;
        opacity: 0;
        transition: opacity k-transition(fade-out);

        &:hover,
        &:focus-within,
        &.k-checkpoint-visible {
            opacity: 1;
            transition: opacity k-transition(fade-in);
        }

        .k-checkpoint-line {
            flex: 1 1 0%;
            height: $kendo-checkpoint-line-width;
            align-self: center;
            border: none;
        }

        .k-checkpoint-stamp {
            font-size: $kendo-checkpoint-stamp-font-size;
            font-weight: $kendo-checkpoint-stamp-font-weight;
            padding-inline: $kendo-checkpoint-stamp-padding-x;
        }
    }
}