/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-9f08182
 * Released under the MIT license.
 */

export const VALIDATION_STYLES = {
    border: {
        invalid: '#danger-text',
        valid: '#success-text',
    },
};
// Base styles shared between ItemAction and ItemBadge
export const ITEM_ACTION_BASE_STYLES = {
    display: 'inline-grid',
    flow: 'column',
    placeItems: 'center',
    placeContent: 'center',
    gap: 0,
    position: 'relative',
    margin: {
        '': '0 1bw 0 1bw',
        ':last-child & !:first-child': '0 $side-padding 0 0',
        '!:last-child & :first-child': '0 0 0 $side-padding',
        ':last-child & :first-child': '0 $side-padding',
        context: '0',
    },
    padding: 0,
    radius: '(1r - 1bw)',
    transition: 'theme',
    flexShrink: 0,
    textDecoration: 'none',
    boxSizing: 'border-box',
    whiteSpace: 'nowrap',
    border: 0,
    height: '$action-size',
    width: {
        '': '$action-size',
        'has-label': 'auto',
    },
    placeSelf: 'center',
    // Side padding for the action buttons
    '$side-padding': '(($size - $action-size - 2bw) / 2)',
    // Size using custom property
    '$action-size': 'min(max((2x + 2bw), (($size, $size-md) - 1x - 2bw)), (4x - 2bw))',
    // Icon styles
    Icon: {
        $: '>',
        display: 'grid',
        placeItems: 'center',
        height: '($action-size - 2bw) ($action-size - 2bw)',
        width: '($action-size - 2bw) ($action-size - 2bw)',
        opacity: {
            '': 1,
            'checkbox & selected': 1,
            'checkbox & !selected': 0,
            'checkbox & !selected & hovered': 0.4,
        },
    },
};
// ---------- DEFAULT THEME ----------
export const DEFAULT_PRIMARY_STYLES = {
    outline: {
        '': '0 #purple-text.0',
        focused: '1bw #purple-text',
    },
    border: {
        '': '#clear',
        pressed: '#purple-text',
        focused: '#purple-text',
        disabled: '#clear',
    },
    fill: {
        '': '#purple',
        hovered: '#purple-text',
        pressed: '#purple',
        disabled: '#purple-disabled',
    },
    color: '#white',
};
export const DEFAULT_SECONDARY_STYLES = {
    border: {
        '': '#purple.15',
        pressed: '#purple.3',
        focused: '#purple-text',
        disabled: '#border',
    },
    fill: {
        '': '#purple.10',
        hovered: '#purple.16',
        pressed: '#purple-text.10',
        disabled: '#dark.04',
    },
    color: {
        '': '#purple',
        disabled: '#dark-04',
    },
};
export const DEFAULT_OUTLINE_STYLES = {
    border: {
        '': true,
        focused: '#purple-text',
        disabled: true,
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#white #dark.0',
        hovered: '#white #dark.03',
        selected: '#white #dark.09',
        'selected & hovered': '#white #dark.12',
        pressed: '#white #dark.09',
        disabled: '#white #dark.04',
    },
    color: {
        '': '#dark-02',
        hovered: '#dark-02',
        'pressed | (selected & !hovered)': '#dark',
        disabled: '#dark-04',
    },
};
export const DEFAULT_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#purple-text',
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#dark.0',
        hovered: '#dark.03',
        selected: '#dark.09',
        'selected & hovered': '#dark.12',
        pressed: '#dark.09',
        disabled: '#clear',
    },
    color: {
        '': '#dark-02',
        hovered: '#dark-02',
        pressed: '#dark',
        disabled: '#dark-04',
    },
};
export const DEFAULT_CLEAR_STYLES = {
    border: {
        '': '#clear',
        pressed: '#purple-text.10',
        focused: '#purple-text',
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#purple.0',
        hovered: '#purple.16',
        'pressed | (selected & !hovered)': '#purple.10',
    },
    color: {
        '': '#purple-text',
        disabled: '#dark-04',
    },
};
export const DEFAULT_LINK_STYLES = {
    outline: {
        '': '0 #purple-text.0',
        focused: '1bw #purple-text',
    },
    border: '0',
    fill: {
        '': '#clear',
    },
    color: {
        '': '#purple-text',
        'hovered & !pressed': '#purple',
        disabled: '#dark-04',
    },
};
export const DEFAULT_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#dark.0',
        'hovered | focused': '#dark.03',
        selected: '#dark.09',
        'selected & (hovered | focused)': '#dark.12',
        pressed: '#dark.09',
        disabled: '#clear',
    },
    color: {
        '': '#dark-02',
        hovered: '#dark-02',
        pressed: '#dark',
        disabled: '#dark-04',
    },
};
// ---------- DANGER THEME ----------
export const DANGER_PRIMARY_STYLES = {
    outline: {
        '': '0 #danger-text.0',
        focused: '1bw #danger-text',
    },
    border: {
        '': '#clear',
        'pressed | focused': '#danger-text',
        disabled: '#clear',
    },
    fill: {
        '': '#danger',
        'hovered & !pressed': '#danger-text',
        disabled: '#danger-disabled',
    },
    color: '#white',
};
export const DANGER_SECONDARY_STYLES = {
    border: {
        '': '#danger.15',
        pressed: '#danger.3',
        focused: '#danger-text',
        disabled: '#border',
    },
    fill: {
        '': '#danger.05',
        'hovered & !pressed': '#danger.1',
        disabled: '#dark.04',
    },
    color: {
        '': '#danger',
        disabled: '#dark-04',
    },
};
export const DANGER_OUTLINE_STYLES = {
    border: {
        '': '#danger.15',
        pressed: '#danger.3',
        focused: '#danger-text',
        disabled: '#border',
    },
    fill: {
        '': '#white #danger.0',
        hovered: '#white #danger.1',
        'pressed | (selected & !hovered)': '#white #danger.05',
        disabled: '#white #dark.04',
    },
    color: {
        '': '#danger-text',
        disabled: '#dark-04',
    },
};
export const DANGER_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#danger-text',
    },
    fill: {
        '': '#dark.0',
        hovered: '#dark.04',
        'pressed | (selected & !hovered)': '#dark.05',
    },
    color: {
        '': '#dark-02',
        'pressed | (selected & !hovered)': '#danger-text',
        disabled: '#dark-04',
    },
};
export const DANGER_CLEAR_STYLES = {
    border: {
        '': '#clear',
        pressed: '#danger.05',
        focused: '#danger-text',
    },
    fill: {
        '': '#danger-text.0',
        hovered: '#danger-text.03',
        selected: '#danger-text.09',
        'selected & hovered': '#danger-text.12',
        pressed: '#danger-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#danger-text',
        hovered: '#danger-text',
        pressed: '#danger-text',
        disabled: '#danger-text.4',
    },
};
export const DANGER_LINK_STYLES = {
    outline: {
        '': '0 #danger-text.0',
        focused: '1bw #danger-text',
    },
    border: 0,
    fill: {
        '': '#clear',
    },
    color: {
        '': '#danger-text',
        'hovered & !pressed': '#danger',
        disabled: '#dark-04',
    },
};
export const DANGER_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#danger-text.0',
        'hovered | focused': '#danger-text.03',
        selected: '#danger-text.09',
        'selected & (hovered | focused)': '#danger-text.12',
        pressed: '#danger-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#danger-text',
        hovered: '#danger-text',
        pressed: '#danger-text',
        disabled: '#danger-text.4',
    },
};
// ---------- SUCCESS THEME ----------
export const SUCCESS_PRIMARY_STYLES = {
    outline: {
        '': '0 #success-text.0',
        focused: '1bw #success-text',
    },
    border: {
        '': '#clear',
        'pressed | focused': '#success-text',
        disabled: '#clear',
    },
    fill: {
        '': '#success',
        'hovered & !pressed': '#success-text',
        disabled: '#success-disabled',
    },
    color: '#white',
};
export const SUCCESS_SECONDARY_STYLES = {
    border: {
        '': '#success.15',
        pressed: '#success.3',
        focused: '#success-text',
        disabled: '#border',
    },
    fill: {
        '': '#success.05',
        'hovered & !pressed': '#success.1',
        disabled: '#dark.04',
    },
    color: {
        '': '#success',
        disabled: '#dark-04',
    },
};
export const SUCCESS_OUTLINE_STYLES = {
    border: {
        '': '#success.15',
        pressed: '#success.3',
        focused: '#success-text',
        disabled: '#border',
    },
    fill: {
        '': '#white #success.0',
        hovered: '#white #success.1',
        'pressed | (selected & !hovered)': '#white #success.05',
        disabled: '#white #dark.04',
    },
    color: {
        '': '#success-text',
        disabled: '#dark-04',
    },
};
export const SUCCESS_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#success-text',
    },
    fill: {
        '': '#dark.0',
        hovered: '#dark.04',
        'pressed | (selected & !hovered)': '#dark.05',
    },
    color: {
        '': '#dark-02',
        'pressed | (selected & !hovered)': '#success-text',
        disabled: '#dark-04',
    },
};
export const SUCCESS_CLEAR_STYLES = {
    border: {
        '': '#clear',
        pressed: '#success.05',
        focused: '#success-text',
    },
    fill: {
        '': '#success-text.0',
        hovered: '#success-text.03',
        selected: '#success-text.09',
        'selected & hovered': '#success-text.12',
        pressed: '#success-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#success-text',
        hovered: '#success-text',
        pressed: '#success-text',
        disabled: '#success-text.4',
    },
};
export const SUCCESS_LINK_STYLES = {
    outline: {
        '': '0 #success-text.0',
        focused: '1bw #success-text',
    },
    border: 0,
    fill: {
        '': '#clear',
    },
    color: {
        '': '#success-text',
        'hovered & !pressed': '#success',
        disabled: '#dark-04',
    },
};
export const SUCCESS_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#success-text.0',
        'hovered | focused': '#success-text.03',
        selected: '#success-text.09',
        'selected & (hovered | focused)': '#success-text.12',
        pressed: '#success-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#success-text',
        hovered: '#success-text',
        pressed: '#success-text',
        disabled: '#success-text.4',
    },
};
// ---------- WARNING THEME ----------
export const WARNING_PRIMARY_STYLES = {
    outline: {
        '': '0 #warning-text.0',
        focused: '1bw #warning-text',
    },
    border: {
        '': '#clear',
        'pressed | focused': '#warning-text',
        disabled: '#clear',
    },
    fill: {
        '': '#warning',
        'hovered & !pressed': '#warning-text',
        disabled: '#warning-disabled',
    },
    color: '#white',
};
export const WARNING_SECONDARY_STYLES = {
    border: {
        '': '#warning.15',
        pressed: '#warning.3',
        focused: '#warning-text',
        disabled: '#border',
    },
    fill: {
        '': '#warning.05',
        'hovered & !pressed': '#warning.1',
        disabled: '#dark.04',
    },
    color: {
        '': '#warning-text',
        disabled: '#dark-04',
    },
};
export const WARNING_OUTLINE_STYLES = {
    border: {
        '': '#warning.15',
        pressed: '#warning.3',
        focused: '#warning-text',
        disabled: '#border',
    },
    fill: {
        '': '#white #warning.0',
        hovered: '#white #warning.1',
        'pressed | (selected & !hovered)': '#white #warning.05',
        disabled: '#white #dark.04',
    },
    color: {
        '': '#warning-text',
        disabled: '#dark-04',
    },
};
export const WARNING_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#warning-text',
    },
    fill: {
        '': '#dark.0',
        hovered: '#dark.04',
        'pressed | (selected & !hovered)': '#dark.05',
    },
    color: {
        '': '#dark-02',
        'pressed | (selected & !hovered)': '#warning-text',
        disabled: '#dark-04',
    },
};
export const WARNING_CLEAR_STYLES = {
    border: {
        '': '#clear',
        pressed: '#warning.05',
        focused: '#warning-text',
    },
    fill: {
        '': '#warning-text.0',
        hovered: '#warning-text.03',
        selected: '#warning-text.09',
        'selected & hovered': '#warning-text.12',
        pressed: '#warning-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#warning-text',
        hovered: '#warning-text',
        pressed: '#warning-text',
        disabled: '#warning-text.4',
    },
};
export const WARNING_LINK_STYLES = {
    outline: {
        '': '0 #warning-text.0',
        focused: '1bw #warning-text',
    },
    border: 0,
    fill: {
        '': '#clear',
    },
    color: {
        '': '#warning-text',
        'hovered & !pressed': '#warning',
        disabled: '#dark-04',
    },
};
export const WARNING_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#warning-text.0',
        'hovered | focused': '#warning-text.03',
        selected: '#warning-text.09',
        'selected & (hovered | focused)': '#warning-text.12',
        pressed: '#warning-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#warning-text',
        hovered: '#warning-text',
        pressed: '#warning-text',
        disabled: '#warning-text.4',
    },
};
// ---------- NOTE THEME ----------
export const NOTE_PRIMARY_STYLES = {
    outline: {
        '': '0 #note-text.0',
        focused: '1bw #note-text',
    },
    border: {
        '': '#clear',
        'pressed | focused': '#note-text',
        disabled: '#clear',
    },
    fill: {
        '': '#note',
        'hovered & !pressed': '#note-text',
        disabled: '#note-disabled',
    },
    color: '#white',
};
export const NOTE_SECONDARY_STYLES = {
    border: {
        '': '#note.15',
        pressed: '#note.3',
        focused: '#note-text',
        disabled: '#border',
    },
    fill: {
        '': '#note.05',
        'hovered & !pressed': '#note.1',
        disabled: '#dark.04',
    },
    color: {
        '': '#note-text',
        disabled: '#dark-04',
    },
};
export const NOTE_OUTLINE_STYLES = {
    border: {
        '': '#note.15',
        pressed: '#note.3',
        focused: '#note-text',
        disabled: '#border',
    },
    fill: {
        '': '#white #note.0',
        hovered: '#white #note.1',
        'pressed | (selected & !hovered)': '#white #note.05',
        disabled: '#white #dark.04',
    },
    color: {
        '': '#note-text',
        disabled: '#dark-04',
    },
};
export const NOTE_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#note-text',
    },
    fill: {
        '': '#dark.0',
        hovered: '#dark.04',
        'pressed | (selected & !hovered)': '#dark.05',
    },
    color: {
        '': '#dark-02',
        'pressed | (selected & !hovered)': '#note-text',
        disabled: '#dark-04',
    },
};
export const NOTE_CLEAR_STYLES = {
    border: {
        '': '#clear',
        pressed: '#note.05',
        focused: '#note-text',
    },
    fill: {
        '': '#note-text.0',
        hovered: '#note-text.03',
        selected: '#note-text.09',
        'selected & hovered': '#note-text.12',
        pressed: '#note-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#note-text',
        hovered: '#note-text',
        pressed: '#note-text',
        disabled: '#note-text.4',
    },
};
export const NOTE_LINK_STYLES = {
    outline: {
        '': '0 #note-text.0',
        focused: '1bw #note-text',
    },
    border: 0,
    fill: {
        '': '#clear',
    },
    color: {
        '': '#note-text',
        'hovered & !pressed': '#note',
        disabled: '#dark-04',
    },
};
export const NOTE_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#note-text.0',
        'hovered | focused': '#note-text.03',
        selected: '#note-text.09',
        'selected & (hovered | focused)': '#note-text.12',
        pressed: '#note-text.09',
        disabled: '#clear',
    },
    color: {
        '': '#note-text',
        hovered: '#note-text',
        pressed: '#note-text',
        disabled: '#note-text.4',
    },
};
// ---------- SPECIAL THEME ----------
export const SPECIAL_PRIMARY_STYLES = {
    outline: {
        '': '0 #white.0',
        focused: '1bw #white',
    },
    border: {
        '': '#clear',
        pressed: '#purple-03',
        disabled: '#white.3',
    },
    fill: {
        '': '#purple',
        'hovered & !pressed': '#purple-text',
        disabled: '#white.12',
    },
    color: {
        '': '#white',
        disabled: '#white.4',
    },
};
export const SPECIAL_SECONDARY_STYLES = {
    border: {
        '': '#white.3',
        pressed: '#white.4',
        focused: '#white',
    },
    fill: {
        '': '#white.12',
        'hovered & !pressed': '#white.18',
        disabled: '#white.12',
    },
    color: {
        '': '#white',
        disabled: '#white.4',
    },
};
export const SPECIAL_OUTLINE_STYLES = {
    border: {
        '': '#white.3',
        pressed: '#white.12',
        focused: '#white',
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#dark #white.0',
        hovered: '#dark #white.18',
        'pressed | (selected & !hovered)': '#dark #white.12',
        disabled: '#dark #white.12',
    },
    color: {
        '': '#white',
        disabled: '#white.4',
    },
};
export const SPECIAL_NEUTRAL_STYLES = {
    border: {
        '': '#clear',
        focused: '#white',
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#white.0',
        hovered: '#white.12',
        'pressed | (selected & !hovered)': '#white.18',
    },
    color: {
        '': '#white',
        disabled: '#white.4',
    },
};
export const SPECIAL_CLEAR_STYLES = {
    outline: {
        focused: '1bw #white',
    },
    border: {
        '': '#clear',
        'pressed | focused': '#white',
        disabled: '#white.3',
        ...VALIDATION_STYLES.border,
    },
    fill: {
        '': '#white',
        'hovered & !pressed': '#white.94',
        disabled: '#white.12',
    },
    color: {
        '': '#purple-text',
        hovered: '#purple',
        'pressed & hovered': '#purple-text',
        disabled: '#white.4',
    },
};
export const SPECIAL_LINK_STYLES = {
    outline: {
        '': '0 #white.0',
        focused: '1bw #white',
    },
    border: '0',
    fill: {
        '': '#clear',
    },
    color: {
        '': '#white',
        'hovered & !pressed': '#white.9',
        disabled: '#white.4',
    },
};
export const SPECIAL_ITEM_STYLES = {
    border: '#clear',
    fill: {
        '': '#white.0',
        hovered: '#white.12',
        'pressed | (selected & !hovered)': '#white.18',
    },
    color: {
        '': '#white',
        disabled: '#white.4',
    },
};
// ---------- CARD TYPE STYLES ----------
// Card type only supports: default, success, danger, note themes
export const DEFAULT_CARD_STYLES = {
    border: '#dark.20',
    fill: '#light',
    color: '#dark-02',
};
export const SUCCESS_CARD_STYLES = {
    border: '#success.20',
    fill: '#success-bg',
    color: '#success-text',
};
export const DANGER_CARD_STYLES = {
    border: '#danger.20',
    fill: '#danger-bg',
    color: '#danger-text',
};
export const WARNING_CARD_STYLES = {
    border: '#warning.20',
    fill: '#warning-bg',
    color: '#warning-text',
};
export const NOTE_CARD_STYLES = {
    border: '#note.20',
    fill: '#note-bg',
    color: '#note-text',
};

        