@use 'sass:map';

@use '../core/styles/common/tokens';

@mixin _mask($config) {
    & {
        position: relative;
    }

    .kbq-mask {
        display: flex;
        position: absolute;

        @if (map.get($config, 'top')) {
            top: map.get($config, 'top');
        }

        @if (map.get($config, 'right')) {
            right: map.get($config, 'right');
        }

        @if (map.get($config, 'bottom')) {
            bottom: map.get($config, 'bottom');
        }

        @if (map.get($config, 'left')) {
            left: map.get($config, 'left');
        }

        .kbq-mask__fade {
            background: var(--kbq-mask-background, transparent);
            // @TODO remove fallback (#DS-3002)
            mask-image: linear-gradient(90deg, transparent, var(--kbq-plt-black, var(--kbq-black-default)));
        }

        .kbq-mask__container {
            background: var(--kbq-mask-background, transparent);
        }
    }
}

@mixin _inline-edit-theme {
    background: var(--kbq-inline-edit-background);

    &:focus-visible {
        outline: none;
    }

    &.cdk-keyboard-focused {
        box-shadow: inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme);
        border-color: var(--kbq-states-line-focus-theme);
    }

    &.kbq-inline-edit_view {
        &:not(.kbq-inline-edit_disabled) {
            &:hover {
                --kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);
                --kbq-mask-background: var(--kbq-states-background-contrast-less-hover);

                cursor: pointer;
            }

            &:active,
            &:has(.kbq-inline-edit__menu.kbq-active) {
                --kbq-inline-edit-background: var(--kbq-states-background-transparent-active);
                --kbq-mask-background: var(--kbq-states-background-contrast-less-active);
            }
        }

        &.kbq-inline-edit_disabled {
            &:hover,
            &:has(.kbq-inline-edit__menu.kbq-active) {
                --kbq-mask-background: var(--kbq-background-bg);
            }
        }
    }

    .kbq-label {
        color: var(--kbq-inline-edit-label-color);
    }
}

@mixin _inline-edit-typography {
    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
}

.kbq-inline-edit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;

    border: var(--kbq-size-border-width) solid transparent;
    border-radius: var(--kbq-size-border-radius);
    padding: var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);
    min-height: var(--kbq-inline-edit-height);

    @include _inline-edit-theme();
    @include _inline-edit-typography();

    &:not(.kbq-inline-edit_with-label) {
        --kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width));
    }

    &.kbq-inline-edit_with-label {
        padding-top: var(--kbq-inline-edit-padding-vertical);
        padding-bottom: var(--kbq-inline-edit-padding-vertical);

        &.kbq-inline-edit_edit {
            .kbq-inline-edit__view-container {
                position: relative;
            }
        }

        .kbq-inline-edit__label {
            margin-bottom: var(--kbq-size-3xs);
        }
    }

    &.kbq-inline-edit_view {
        .kbq-inline-edit__view-container,
        .kbq-inline-edit__view-content {
            text-overflow: ellipsis;
        }
    }

    &:hover,
    &.cdk-keyboard-focused {
        .kbq-inline-edit__menu-mask {
            opacity: 1;
        }
    }

    .kbq-inline-edit__placeholder {
        color: var(--kbq-foreground-contrast-secondary);
    }

    @include _mask(
        (
            'top': calc(var(--kbq-size-border-width) * -1),
            'right': calc(var(--kbq-size-border-width) * -1)
        )
    );

    .kbq-inline-edit__menu-mask {
        opacity: 0;
        height: calc(100% + 2 * var(--kbq-size-border-width));
        justify-content: flex-end;
        border-top-right-radius: var(--kbq-size-border-radius);
        border-bottom-right-radius: var(--kbq-size-border-radius);

        &:has(.kbq-inline-edit__menu.kbq-pressed, .kbq-inline-edit__menu.cdk-keyboard-focused) {
            opacity: 1;
        }

        .kbq-inline-edit__menu-mask-fade {
            width: 32px;
        }

        .kbq-inline-edit__menu-mask-container {
            display: flex;
            justify-content: flex-end;
            min-width: 40px;
            border-radius: inherit;
        }

        .kbq-inline-edit__menu {
            display: inline-flex;
            align-self: flex-start;
            padding: var(--kbq-size-s);
            z-index: 2;
        }
    }
}

.kbq-inline-edit__panel {
    width: 100%;

    .kbq-inline-edit__control-container {
        border-radius: var(--kbq-size-border-radius);
    }

    .kbq-inline-edit__action-buttons {
        position: absolute;
        left: calc(-1 * var(--kbq-inline-edit-padding-horizontal));
        display: inline-flex;
        flex-direction: row;
        gap: var(--kbq-size-xxs);
        padding: var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s);
    }

    .kbq-inline-edit__control-container,
    .kbq-inline-edit__action-buttons > .kbq-button-icon {
        box-shadow: var(--kbq-shadow-popup);
    }
}