@import "variables";

$dark-theme: (
  bg-color: $blue-800,
  color: $blue-250,
  al-header: $blue-100,
  card: (
    body-bg-color: $blue-500,
    footer-bg-color: $blue-600,
    border-color: $blue-250,
    seperator-line-color: $blue-250,
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1)
  ),
  scrollbar: (
    tumb-background: lighten($blue-600, 10%),
    tumb-background-hover: lighten($blue-600, 20%)
  ),
  bootstrap: (
    primary: $blue-600,
    primary-font-color: $blue-400
  ),
  primeng: (
    fontFamily: $font-family-base,
    fontSize: $font-size-base,
    borderRadius: $border-radius,
    disabledOpacity: 0.35,
    //Header,
    headerBorderWidth: $border-width,
    headerBorderColor: transparent,
    headerBgColor: $blue-500,
    headerTextColor: $blue-200,
    headerFontWeight: 500,
    headerIconTextColor: $blue-300,
    headerBoxShadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
    //Content,
    contentBorderWidth: $border-width,
    contentBorderColor: transparent,
    contentBgColor: $blue-700,
    contentTextColor: $font-default-color,
    //Default State,
    stateDefaultBorderWidth: $border-width,
    stateDefaultBorderColor: transparent,
    stateDefaultBgColor: $blue-600,
    stateDefaultTextColor: $blue-300,
    //Active State,
    stateActiveBorderColor: $blue-600,
    stateActiveBgColor: $blue-500,
    stateActiveTextColor: $blue-100,
    //Highlight State,
    stateHighlightBorderColor: transparent,
    stateHighlightBgColor: $blue-300,
    stateHighlightTextColor: #ffffff,
    //Focus State,
    stateFocusBorderColor: $blue-500,
    stateFocusBgColor: $blue-500,
    stateFocusTextColor: $blue-100,
    //Error State,
    stateErrorBorderColor: #ec4e4e,
    stateErrorBgColor: #ec4e4e,
    stateErrorTextColor: #ffffff,
    //Hover State,
    stateHoverBorderColor: $blue-500,
    stateHoverBgColor: $blue-500,
    stateHoverTextColor: $blue-280,
    //Forms,
    inputBgColor: $blue-50,
    inputTextColor: $blue-600,
    invalidInputBorderColor: #ec4e4e,
    inputGroupTextColor: $blue-600,
  ),
  navbar-item: (
    color: #8f9cc8,
    active-color: $neon-yellow
  ),
  input: (
    height: 32px,
    color: $blue-200,
    place-holder-color: $blue-300,
    background-color: #000,
    background-color-disabled: #000,
    border-radius: 4px,
    border-color: $blue-500,
    border-width: 1px,
    focus-color: $blue-100,
    hover-border-color: rgba(206, 209, 220, 0.5),
    focus-border-color: $blue-300,
    focus-box-shadow: none,
    focus-bg: $white,
  ),

  search-input: (
    color: $blue-280,
    icon-color: $blue-280,
    border-color: $blue-200,
    border-color-focus: $blue-500,
    ph-color: $blue-280,
    seperator: $blue-900
  ),
  input-select: (
    height: 32px,
    option-color: $blue-400,
  ),
  input-highlight: (
    height: 48px,
    background-color: black,
    border-radius: 4px,
    border: 0px,
    color: $blue-200,
    placeholder-color: $blue-300
  ),
  table: (
    cell-padding: .75rem,
    cell-padding-sm: .3rem,
    bg: unset,
    even-bg: $blue-800,
    hover-bg: $blue-600,
    hover-color: $white,
    active-bg: $purple,
    header-bg: $blue-700,
    header-hover-bg: $blue-600,
    header-color: $blue-300,
    border-radius: 0px, // TODO,
    border-color: transparent, // TODO,
    row-color: $blue-100,
    row-bg-color: transparent,
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.1),
  ),
  button-toggle-group: (
    background-color-active: $blue-500,
    background-color: $blue-600,
    color-active: $blue-100,
    color: $blue-300
  ),
  button: (
    // default
    color: $blue-300,
    background-color: $blue-600,
    border-color: $blue-600,

    // hover
    color-hover: $blue-200,
    background-color-hover: $blue-500,
    border-color-hover: $blue-500,

    // focus
    color-focus: $blue-300,
    background-color-focus: $blue-600,
    border-color-focus: $blue-600
  )
);



