// -----------------------------------------
//   CONFIGURATION. $UI.Div
// -----------------------------------------

$this = merge({
  defaultHoverOpacity: 0.8,
  defaultActiveOpacity: 0.5
}, $UI.Div, true)

// -----------------------------------------
//   COMPONENT
// -----------------------------------------

_pushedSizes = ('xs' 's' 'm' 'l' 'xl' 'xxl')

// skip level 0 for shadow
// because it needed only when you want to override shadow from style sheet
_shadowLevels = ('1' '2' '3' '4')

.root
  outline-color: $UI.colors.primary

  &.column
    &.left
      align-items stretch

    &.center
      align-items center

    &.right
      align-items flex-end

    &.v_top
      justify-content flex-start

    &.v_center
      justify-content center

    &.v_bottom
      justify-content flex-end

  &.row
    flex-direction row

    &.left
      justify-content flex-start

    &.center
      justify-content center

    &.right
      justify-content flex-end

    &.v_top
      align-items flex-start

    &.v_center
      align-items center

    &.v_bottom
      align-items flex-end

  &.wrap
    flex-wrap wrap

  &.reverse
    &.column
      flex-direction column-reverse

    &.row
      flex-direction row-reverse

  &.rounded
    radius()

  &.circle
    radius(circle)

  for size in _pushedSizes
    &.pushed-{size}
      margin-left: $UI.gutters[size]

  for level in _shadowLevels
    &.shadow-{level}
      shadow(level)

  &.bleed
    bleed()

  &.full
    flex-grow 1
    flex-shrink 1

  &.clickable
    cursor pointer
    user-select none

    &.disabled
      opacity 0.5

      +web()
        cursor default

// -----------------------------------------
//   JS EXPORTS
// -----------------------------------------

:export
  config: $this
  shadows: $UI.shadows