$panel-margin: v("block-spacing") !default
$panel-item-border: 1px solid v("border-light") !default
$panel-radius: v("radius-large") !default
$panel-shadow: 0 0.5em 1em -0.125em vAlphaChange("scheme-invert", 0.1), 0 0px 0 1px vAlphaChange("scheme-invert", 0.02) !default

$panel-heading-background-color: v("border-light") !default
$panel-heading-color: v("text-strong") !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.75em 1em !default
$panel-heading-radius: v("radius") !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: v("weight-bold") !default

$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid v("border") !default
$panel-tab-active-border-bottom-color: v("link-active-border") !default
$panel-tab-active-color: v("link-active") !default

$panel-list-item-color: v("text") !default
$panel-list-item-hover-color: v("link") !default

$panel-block-color: v("text-strong") !default
$panel-block-hover-background-color: v("background") !default
$panel-block-active-border-left-color: v("link") !default
$panel-block-active-color: v("link-active") !default
$panel-block-active-icon-color: v("link") !default

$panel-icon-color: v("text-light") !default
$panel-colors: $colors-list !default

+register(panel-radius,$panel-radius, true)
+register(panel-shadow,$panel-shadow, true)
+register(panel-margin,$panel-margin, true)
+register(panel-item-border,$panel-item-border, true)
+register(panel-heading-background-color,$panel-heading-background-color, true)
+register(panel-heading-color,$panel-heading-color, true)
+register(panel-heading-size,$panel-heading-size, true)
+register(panel-heading-weight,$panel-heading-weight, true)
+register(panel-heading-line-height,$panel-heading-line-height, true)
+register(panel-heading-padding,$panel-heading-padding, true)
+register(panel-tabs-font-size,$panel-tabs-font-size, true)
+register(panel-tab-border-bottom,$panel-tab-border-bottom, true)
+register(panel-tab-active-border-bottom-color,$panel-tab-active-border-bottom-color, true)
+register(panel-tab-active-color,$panel-tab-active-color, true)
+register(panel-list-item-color,$panel-list-item-color, true)
+register(panel-list-item-hover-color,$panel-list-item-hover-color, true)
+register(panel-block-color,$panel-block-color, true)
+register(panel-block-active-border-left-color,$panel-block-active-border-left-color, true)
+register(panel-block-active-color,$panel-block-active-color, true)
+register(panel-block-active-icon-color,$panel-block-active-icon-color, true)
+register(panel-block-hover-background-color,$panel-block-hover-background-color, true)
+register(panel-icon-color,$panel-icon-color, true)

.panel
  border-radius: v("panel-radius")
  box-shadow: v("panel-shadow")
  font-size: v("size-normal")
  &:not(:last-child)
    margin-bottom: v("panel-margin")
  // Colors
  @each $name in $panel-colors
    $color: v($name)
    $color-invert: v($name+"-invert")
    &.is-#{$name}
      .panel-heading
        background-color: $color
        color: $color-invert
      .panel-tabs a.is-active
        border-bottom-color: $color
      .panel-block.is-active .panel-icon
        color: $color

.panel-tabs,
.panel-block
  &:not(:last-child)
    border-bottom: v("panel-item-border")

.panel-heading
  background-color: v("panel-heading-background-color")
  border-radius: v("panel-radius") v("panel-radius") 0 0
  color: v("panel-heading-color")
  font-size: v("panel-heading-size")
  font-weight: v("panel-heading-weight")
  line-height: v("panel-heading-line-height")
  padding: v("panel-heading-padding")

.panel-tabs
  align-items: flex-end
  display: flex
  font-size: v("panel-tabs-font-size")
  justify-content: center
  a
    border-bottom: v("panel-tab-border-bottom")
    margin-bottom: -1px
    padding: 0.5em
    // Modifiers
    &.is-active
      border-bottom-color: v("panel-tab-active-border-bottom-color")
      color: v("panel-tab-active-color")

.panel-list
  a
    color: v("panel-list-item-color")
    &:hover
      color: v("panel-list-item-hover-color")

.panel-block
  align-items: center
  color: v("panel-block-color")
  display: flex
  justify-content: flex-start
  padding: 0.5em 0.75em
  input[type="checkbox"]
    +ltr-property("margin-right", 0.75em)
  & > .control
    flex-grow: 1
    flex-shrink: 1
    width: 100%
  &.is-wrapped
    flex-wrap: wrap
  &.is-active
    border-left-color: v("panel-block-active-border-left-color")
    color: v("panel-block-active-color")
    .panel-icon
      color: v("panel-block-active-icon-color")
  &:last-child
    border-bottom-left-radius: v("panel-radius")
    border-bottom-right-radius: v("panel-radius")

a.panel-block,
label.panel-block
  cursor: pointer
  &:hover
    background-color: v("panel-block-hover-background-color")

.panel-icon
  +fa(14px, 1em)
  color: v("panel-icon-color")
  +ltr-property("margin-right", 0.75em)
  .fa
    font-size: inherit
    line-height: inherit