.panel {
  width: 100%;
  overflow: hidden;
  background-color: $panel-bg;
  border-radius: $panel-border-radius;
  box-shadow: $panel-box-shadow;
  border: $panel-border-width solid $panel-border-color;

  .panel-header {
    display: flex;
    justify-content: space-between;

    .panel-info {
      padding: $panel-spacer;
    }

    .panel-options {
      display: flex;
      padding-left: 0;

      a {
        display: block;
        margin: $panel-spacer 0;
        margin-left: 0.375rem;
        color: $body-text;

        &.collapse {
          span {
            transition: all 0.2s ease-out;
          }
        }

        &:hover {
          color: $brand-primary;
        }
      }

      &:last-child {
        margin-right: $panel-spacer;

      }
    }

  }

  .collapsible {
    transition: max-height 0.2s ease-out;
  }

  &-collapsed {
    .panel-header {
      .panel-options {
        a {
          &.collapse {
            span {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}