@use "sass:math";
@use "../../mixins/index.scss" as *;
@use "./_variables.scss" as *;
@use "../../_variables.scss" as *;
@use "../../z-index/index.scss" as *;

@mixin kendo-draggable--layout-base() {

    // Layout
    .k-drag-clue {
        @include border-radius( $kendo-drag-hint-border-radius );
        padding-block: $kendo-drag-hint-padding-y;
        padding-inline: $kendo-drag-hint-padding-x;
        border-width: $kendo-drag-hint-border-width;
        border-style: if( $kendo-drag-hint-border-width == null, null, solid );
        box-sizing: border-box;
        font-size: $kendo-drag-hint-font-size;
        font-family: $kendo-drag-hint-font-family;
        line-height: $kendo-drag-hint-line-height;
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        white-space: nowrap;
        opacity: $kendo-drag-hint-opacity;
        overflow: hidden;
        position: absolute;
        z-index: k-z-index("floating");
        cursor: move;
    }
    .k-drag-status,
    .k-drag-clue .k-drag-status {
        margin: 0;
        margin-inline-end: .4ex;
    }


    // Drop hint
    .k-drop-hint {
        display: flex;
        gap: $kendo-drop-hint-arrow-spacing;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        z-index: k-z-index("floating");
        transform: translate(-50%, -50%);
    }

    .k-drop-hint-start,
    .k-drop-hint-end {
        flex-shrink: 0;
        border-width: calc( $kendo-drop-hint-arrow-size / 2 );
        border-style: solid;
        border-color: transparent;
    }

    .k-drop-hint-line {
        flex-grow: 1;
        background-color: $kendo-drop-hint-bg;
    }

    .k-drop-hint-h {
        .k-drop-hint-start {
            border-inline-start-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
            border-inline-start-color: $kendo-drop-hint-bg;
            border-inline-end-width: 0;
        }

        .k-drop-hint-line {
            width: $kendo-drop-hint-line-h-width;
            height: $kendo-drop-hint-line-h-height;
        }

        .k-drop-hint-end {
            border-inline-end-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
            border-inline-end-color: $kendo-drop-hint-bg;
            border-inline-start-width: 0;
        }
    }

    .k-drop-hint-v {
        flex-direction: column;

        .k-drop-hint-start {
            border-block-start-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
            border-block-start-color: $kendo-drop-hint-bg;
            border-block-end-width: 0;
        }

        .k-drop-hint-line {
            width: $kendo-drop-hint-line-v-width;
            height: $kendo-drop-hint-line-v-height;
        }

        .k-drop-hint-end {
            border-block-end-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
            border-block-end-color: $kendo-drop-hint-bg;
            border-block-start-width: 0;
        }
    }


    // Reorder cue
    .k-reorder-cue {
        position: absolute;

        &::before,
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 3px solid transparent;
            position: absolute;
            transform: translateX(-50%);
        }

        &::before {
            border-block-end-width: 0;
            border-block-start-color: currentColor;
            inset-block-start: -4px;
        }
        &::after {
            border-block-start-width: 0;
            border-block-end-color: currentColor;
            inset-block-end: -4px;
        }
    }

}