@import "bootstrap/panels";

.panel {
  @include box-shadow(0 1px 10px 0 rgba(0, 0, 0, 0.12));
}

.panel-squared {
  border-bottom: none !important;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.panel-stack-shadow {
  box-shadow: 0 2px 2px rgba(0,0,0,0.15);
}

.panel-transparent {
  background-color: transparent;
  box-shadow: none;
}

.panel-fit {
  background-color: #fafafa;
  border-top: 1px solid #dddddd;
  margin: 0 -16px -16px;
  width: auto;
}

$collapsible-arrow-size: 29px;

.collapsible {
  display: block;
  text-decoration: none !important;

  &[aria-expanded=true] .arrow,
  &[aria-expanded=false] .arrow {
    @extend .fa-solid;
    border: 2px solid $gray-lighter;
    border-radius: $collapsible-arrow-size;
    color: $gray-light;
    height: $collapsible-arrow-size;
    line-height: $collapsible-arrow-size - 6;
    position: relative;
    left: -4px;
    text-align: center;
    width: $collapsible-arrow-size;

    &:before {
      display: inline-block;
      left: 1px;
      position: relative;
      transition: all .4s ease-in-out;
    }
  }
  &[aria-expanded=true] .arrow:before {
    content: $fa-var-chevron-up;
  }
  &[aria-expanded=false] .arrow:before {
    top: 1px;
    content: $fa-var-chevron-down;
  }

  &:hover {
    text-decoration: none !important;
  }
}


