/**
 * @license
 * Copyright Logo Yazılım. All Rights Reserved.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of Logo Yazılım.
 * Any reproduction of this material must contain this notice.
 */

/* stylelint-disable */
$config: if(not variable-exists(config), (), $config);
$config: deep-map-merge((
  useLogoUI: false,
  root: ":root",
  selector: ":root",
  icon:(prefix: 'le-'),
  customize: (
    status: true,
    element:(
      button: (
        font: (
          color: --neutral-900,
        ),
        border: (
          default: --light-600,
        ),
        hover: (
          font:(
            color: var(--neutral-900)
          )
        )
      ),
      input: (
        font: (
          color: --neutral-900
        )
      )
    ),
  ),
  font:(
    family: "Nunito Sans" !important,
    alternative: "Source Sans Pro" !important,
    icon:"logo-i-font",
    size: 16px,
    size-base: 16px,
    path: "~@logo-software/theme/assets/fonts",
    color:(name: --neutral, value: 900)
  ),
  grid:(
    status: true,
    columns: 12,
    gutter: 30px,
    breakpoints: (
      xs: 0,
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px,
      xxl: 1440px,
    ),
    container-max-widths: (
      xs: auto,
      sm: 540px,
      md: 720px,
      lg: 960px,
      xl: 1140px,
      xxl: 1320px,
    ),
  ),
  border:(
    radius: 2px
  ),
  size:(
    small: (font-size: 14px, icon-size: 14px, height: 24px, icon-container: 24px),
    medium: (font-size: 14px, icon-size: 14px, height: 32px, icon-container: 32px),
    large: (font-size: 16px, icon-size: 24px, height: 48px, icon-container: 48px)
  ),
  spacing:(
    size: 4px,
    count: 10,
    important: true
  ),
  state: (
    list: hover active focus,
    shade: (
      hover: 600,
      active: 700,
      focus: 700
    ),
    tranparency:(
      hover: 0.08,
      active: 0.15,
      focus: 0.15
    ),
    disabled:(
      opacity: 0.4,
      color: --neutral-500
    ),
    selected: (
    )
  ),
  type: fill outline ghost,
  element: (
    label: (font-size: 12px, line-height:16px, padding: 2px 0, color: var(--neutral-500)),
    input:(
      placeholder:(opacity: 0.5),
      size:(
        small:(padding: 5px),
        medium:(padding: 7px),
        large:(padding: 10px),
      ),
      border: (
        status: true,
        color: var(--basic-700),
        right-color: --basic-700,
      ),
      readonly: (
        background: (
          color: var(--basic-600)
        )
      )
    ),
    button:(
      size:(
        small:(padding: 8px),
        medium:(padding: 15px),
        large:(padding: 24px),
      ),
      border: (
        right-color: --secondary-700
      ),
      selected: (type: 'fill', color: 'neutral', shade: 500, text: 'white')
    ),
    switch:(
      size:(
        small:(width: 38px, height:24px, circle-padding: 2px, slider: 20px, border-radius: 16px),
        medium:(width: 52px, height:32px, circle-padding: 2px, slider: 28px, border-radius: 16px),
        large:(width: 83px, height:48px, circle-padding: 4px, slider: 40px, border-radius: 40px),
      )
    ),
    head: (
      margin: 0,
      size:(
        small:(
          h1: (font-size : 32px, line-height : 44px, font-weight : 400),
          h2: (font-size : 24px, line-height : 32px, font-weight : 400),
          h3: (font-size : 20px, line-height : 26px, font-weight : 600),
          h4: (font-size : 18px, line-height : 24px, font-weight : 600),
          h5: (font-size : 16px, line-height : 22px, font-weight : 700),
          h6: (font-size : 14px, line-height : 18px, font-weight : 700)
        ),
        medium:(
          h1: (font-size : 32px, line-height : 44px, font-weight : 400),
          h2: (font-size : 24px, line-height : 32px, font-weight : 400),
          h3: (font-size : 20px, line-height : 26px, font-weight : 600),
          h4: (font-size : 18px, line-height : 24px, font-weight : 600),
          h5: (font-size : 16px, line-height : 22px, font-weight : 700),
          h6: (font-size : 14px, line-height : 18px, font-weight : 700)
        ),
        large: (
          h1: (font-size : 32px, line-height : 44px, font-weight : 400),
          h2: (font-size : 24px, line-height : 32px, font-weight : 400),
          h3: (font-size : 20px, line-height : 26px, font-weight : 600),
          h4: (font-size : 18px, line-height : 24px, font-weight : 600),
          h5: (font-size : 16px, line-height : 22px, font-weight : 700),
          h6: (font-size : 14px, line-height : 18px, font-weight : 700)
        )
      )
    ),
    g-typography: (
      margin: 15px,
      size:(
        bold:(
          g1: (font-size : 92px, line-height : 124px, font-weight : bold),
          g2: (font-size : 84px, line-height : 114px, font-weight : bold),
          g3: (font-size : 76px, line-height : 104px, font-weight : bold),
          g4: (font-size : 68px, line-height : 92px, font-weight : bold),
          g5: (font-size : 60px, line-height : 82px, font-weight : bold),
          g6: (font-size : 54px, line-height : 74px, font-weight : bold),
          g7: (font-size : 48px, line-height : 66px, font-weight : bold),
          g8: (font-size : 42px, line-height : 56px, font-weight : bold)
        ),
        medium:(
          g1: (font-size : 92px, line-height : 124px, font-weight : normal),
          g2: (font-size : 84px, line-height : 114px, font-weight : normal),
          g3: (font-size : 76px, line-height : 104px, font-weight : normal),
          g4: (font-size : 68px, line-height : 92px, font-weight: normal),
          g5: (font-size : 60px, line-height : 82px, font-weight : normal),
          g6: (font-size : 54px, line-height : 74px, font-weight : normal),
          g7: (font-size : 48px, line-height : 66px, font-weight : normal),
          g8: (font-size : 42px, line-height : 56px, font-weight : normal)
        ),
      )
    ),
    paragraph: (
      margin: (top: 15px, right: 0, bottom: 15px, left:0),
      size:(
        small: (font-size: 12px, line-height : 16px),
        medium: (font-size: 14px, line-height : 18px),
        large: (font-size: 16px, line-height : 22px),
      )
    ),
    modal: (
      box-shadow: none,
      header:(
        height: 52px,
        color: var(--neutral-1000),
        box-shadow: "0 0 10px 0 rgba(106, 120, 245, 0.05), 0 5px 5px 0 rgba(106, 120, 245, 0.1)",
        border-bottom: none,
      ),
      footer:(
        box-shadow: "0 0 10px 0 rgba(106, 120, 245, 0.05), 0 -5px 5px 0 rgba(106, 120, 245, 0.1)",
        height: 52px,
        padding: 0 10px,
      ),
      body:(
        margin: 30px,
        font-size: 16px,
        color: var(--neutral-1000),
      ),
    ),
    tab:(
      align: center,
      shadow: "0 0 10px 0 rgba(106, 120, 245, 0.05), 0 5px 5px 0 rgba(106, 120, 245, 0.1)",
      margin: 20px,
      font-weight: 700,
      size: (
        medium: (height: 26px, font-size: 14px, margin: 13px 10px, padding: (top: 0, right: 10px, bottom: 0, left: 10px)),
        large: (height: 40px, font-size: 14px, margin: 14px 10px, padding: (top: 0, right: 20px, bottom: 0, left: 20px))
      ),
      color: (secondary:700, primary:500),
      close:(
        font-size: 12px
      )
    ),
    link:(
      inline: (
        color: info-500
      ),
      standalone: (
        color: info-500
      )
    ),
    menu:(
      item:(
        height: 40px,
        box-shadow: 0 size(2px) size(15px) size(4px) rgba(var(--primary-rgb), 0.1)
      )
    ),
    tree:(
      padding-left: 25px,
      font: (
        color: var(--neutral-900)
      ),
      size: (
        small: (height: 32px, font-size: 14px, line-height: 18px, padding: (left: 10px, right: 5px)),
        medium: (height: 48px, font-size: 14px, line-height: 18px, padding: (left: 10px, right: 5px)),
        large:(height: 64px, font-size: 14px, line-height: 18px, padding: (left: 10px, right: 5px)),
      )
    ),
    badge:(
      size:(
        small: (font-size: 12px, line-height: 16px, padding: 1px 5px),
        medium: (font-size: 12px, line-height: 16px, padding: 4px 7px),
        large: (font-size: 12px, line-height: 16px, padding: 7px 10px)
      )
    ),
    fieldset:(
      border: 1px solid var(--basic-600),
      padding: 20px,
      header: (height: 22px, font-size: 16px, color: --neutral-900)
    ),
    table:(
      font: (
        color: --neutral-900,
        size: 14px,
        line-height: 18px,
      ),
      icon: (font-size: 10px),
      header: (
        background-color: var(--basic-600),
        font-size: 14px,
        line-height: 18px,
        color: --neutral-900,
        font-weight: 700,
      ),
      filter: (background-color: var(--basic-700)),
      expanded: (backround-color: var(--basic-500), padding: 10px),
      size: (
        small: (
          min-height: 32px,
          body: (padding: (top: 4px, right: 6px, bottom: 4px, left: 10px)),
          header: (padding: (top: 4px, right: 5px, bottom: 4px, left: 5px)),
        ),
        medium: (
          min-height: 48px,
          body: (padding: (top: 8px, right: 6px, bottom: 8px, left: 10px)),
          header: (padding: (top: 8px, right: 5px, bottom: 8px, left: 5px))
        ),
        large: (
          min-height: 64px,
          body: (padding: (top: 12px, right: 6px, bottom: 12px, left: 10px)),
          header: (padding: (top: 12px, right: 5px, bottom: 12px, left: 5px))
        ),
      ),
      paging: (
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08)
      ),
      striped: (
        status: true,
        reverse: false
      )
    ),
    select: (
      size: (
        small: (padding-right: 30px),
        large: (padding-right: 30px)
      )
    ),
    paging: (
      padding: 10px,
      background: var(--white),
      box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08),
      font-size: size(12px),
      line-height: size(20px),
      button: (
        margin: (right: 5px),
        color: (
          default: ghost-neutral,
          selected: fill-basic,
          arrows: ghost-primary
        ),
      ),
    ),
    popover: (
      height: 40px,
      icon: (
        width: 14px,
        height: 100%,
      ),
      padding: (
        right: 10px,
        left: 10px,
      )
    ),
    avatar:(
      size: (
        small: (
          width: 24px,
          text-indent: -9999,
          notification: 2px,
          online: 8px,
          online-pos: 0,
        ),
        medium: (
          width: 30px,
          text-indent: -9999,
          notification: 2px,
          online: 8px,
          online-pos: 0,
        ),
        large: (
          width: 44px,
          text-indent: auto,
          notification: 12px,
          online: 12px,
          online-pos: 0,
        ),
        huge: (
          width: 64px,
          text-indent: auto,
          notification: 12px,
          online: 12px,
          online-pos: 4px,
        ),
        huge_xl: (
          width: 80px,
          text-indent: auto,
          notification: 12px,
          online: 12px,
          online-pos: 6px,
        ),
      )
    )
  ),
  color: (
    list: (
      primary: #0090ff,
      secondary: #dde8f7,
      basic: #f2f4f9, // #a1b9d1, // #75899e, //#cdd7e2, //#f2f4f9,
      neutral: #858585,
      light: #ffffff,
      dark: #6a6a6a,
      gray: #cccccc,
      info: #47bdff,
      danger: #ff3e51,
      warning: #f8aa1c,
      success: #01cc78,
    ),
    semantic: info danger warning success,
    shades:(
      100: 90%,
      200: 80%,
      300: 60%,
      400: 30%,
      500: 0%,
      600: 8%, // 8
      700: 15%, // 15
      800: 25%, // 25
      900: 40%,
      1000: 60%
    ),
    visualization: (
      yellow: #f8cf1c,
      purple: #8054ff,
      pink: #ee538b,
      teal: #69DABF,
      tan: #ef9d85,
    ),
    logo-ui: (
      primary: #C8102E,
      secondary: #dde8f7,
      basic: #f2f4f9, // #a1b9d1, // #75899e, //#cdd7e2, //#f2f4f9,
      neutral: #505759,
      light: #ffffff,
      dark: #6a6a6a,
      gray: #919D9D,
      info: #47bdff,
      danger: #F54242,
      warning: #FFD658,
      success: #27ae60,
    ),
  ),
  bootstrap:(
    status: false,
    color-map:(
      primary: primary,
      secondary: secondary,
      success: success,
      danger: danger,
      warning: warning,
      info: info,
      light: light,
      dark: dark
    )
  ),
  vaadin:(
    status: false,
    just-semantic: true,
    color-map:(
      friendly: success,
      error: danger,
    ),
    size-map:(
      tiny: small,
      huge: large,
    ),
    element: (
      panel: (
        status: true,
        padding: (status: true, size: 20px)
      ),
      menubar: (status: true),
      grid: (status: true),
      slider: (status: true),
      split: (status: true,
        size: (
          medium: (
            margin: (top: 6px, right: 0, bottom: 6px, left: 0),
            width: 4px,
            sepertor: (height: 20px, width: 2px)
          ),
          large: (
            margin: (top: 0, right: 12px, bottom: 0, left: 12px),
            width: 8px,
            sepertor: (height: 12px, width: 2px)
          )
        )),
      table: (status: true),
      tree: (status: true),
      tab: (
        status: true,
        size: (
          medium: (padding: (top: 4px, right: 10px, bottom: 4px, left: 10px)),
          large: (padding: (top: 11px, right: 20px, bottom: 11px, left: 20px)),
        )
      ),
    )
  ),
  devexpress:(
    status: false,
    element: (
      navbar: (
        height: 56px,
        color: var(--neutral-900),
        background: (
          color: var(--basic-300),
        ),
        shadow: none,
      ),
      k-drawer: (
        color: var(--neutral-900),
        background-color: var(--white),
        hover: var(--basic-500),
        height: 32px,
        box-shadow: none,
        font-size: 14px,
        line-height: 18px,
      ),
      widget: (
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08),
        padding: 16px,
        header: (
          font-weight: bold,
          font-size: 14px,
          line-height: 18px,
          color: var(--neutral-900),
        ),
        content: (
          padding: 27px 0,
          font-weight: bold,
          font-size: 54px,
          line-height: 74px,
          color: var(--basic-900),
        ),
        footer: (
          font-weight: 600,
          font-size: 14px,
          line-height: 18px,
          color: var(--primary-500),
        )
      ),
      table: (
        th: (height: 40px),
        td: (height: 40px, border-color: var(--basic-600)),
        button: (height: size-small, extend: ghost-secondary),
      ),
    )
  ),
  debug: false,
  extend-colors: true,
  extend-size: true,
), $config, true);
/* stylelint-enable */

$color-state: if(get("useLogoUI"), map-get(map-get($config, color), logo-ui), map-get(map-get($config, color), list));
$color-semantic: ();

@each $item in get("color.semantic") {
  $color-semantic: map-merge($color-semantic, ($item: map-get($color-state, $item)));
  $color-state: map-remove($color-state, $item);
}

$color-list: map-merge($color-state, $color-semantic);
$config: deep-map-merge((color:(state: map-keys($color-state), list: $color-list)), $config, true);

$colors: ();
