@import "colors/index";

$section-header-bg: $color-blue;
$section-header-color: $color-white;
$section-shadow: $shadow-12;

.swui-section {
  display: block;
  margin-bottom: 2em;

  .swui-section-header {
    background: $section-header-bg;
    display: block;
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    color: $section-header-color;
    position: relative;

    &.swui-section-collapsible {
      padding-left: 30px;
    }

    .swui-section-toggle {
      font-size: 14px;
      vertical-align: top;
      display: inline-block;
      line-height: 40px;
      position: absolute;
      background: none;
      border: none;
      box-shadow: none;
      padding: 0;
      left: 10px;
      cursor: pointer;
    }

    a {
      color: $section-header-color;
    }

    h1 {
      font-size: 1.1em;
      font-weight: 600;
      line-height: 40px;
      padding: 0;
      margin: 0;
    }
  }

  .swui-section-content {
    padding: 1.8em;
  }

  &.shadow {
    > section {
      box-shadow: $section-shadow;
    }
  }
}