@import 'mixins/mixins';
@import 'mixins/utils';
@import 'common/var';

@include b(panel) {
  background-color: $--color-white;

  & + & {
    margin-top: 20px;
  }

  @include when(border) {
    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  @include when(round) {
    border-radius: 6px;
  }

  @include e(header) {
    box-sizing: border-box;
    height: 50px;
    line-height: 34px;
    padding: 8px 12px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  @include e(body) {
    padding: 12px;
    @include utils-clearfix;
  }

  @include e(footer) {
    padding: 8px 12px;
    background-color: $--background-color-base;
    border-top: 1px solid $--border-color-base;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  @include e(title) {
    margin: 0;
    font-size: 18px;

    > a,
    > small,
    > .small,
    > small > a,
    > .small > a {
      color: inherit;
    }
  }

  @include m(default) {
    border-color: $--border-color-base !important;

    @include e(header) {
      color: $--color-text-regular;
      background-color: $--color-white;
      border-color: $--border-color-base;
    }
  }

  @include m(primary) {
    border-color: $--color-primary !important;

    @include e(header) {
      color: $--color-primary-light-9;
      background-color: $--color-primary;
      border-color: $--color-primary;
    }
  }

  @include m(success) {
    border-color: $--color-success-light !important;

    @include e(header) {
      color: $--color-success;
      background-color: $--color-success-light;
      border-color: $--color-success-light;
    }
  }

  @include m(warning) {
    border-color: $--color-warning-light !important;

    @include e(header) {
      color: $--color-warning;
      background-color: $--color-warning-light;
      border-color: $--color-warning-light;
    }
  }

  @include m(danger) {
    border-color: $--color-danger-light !important;

    @include e(header) {
      color: $--color-danger;
      background-color: $--color-danger-light;
      border-color: $--color-danger-light;
    }
  }

  @include m(info) {
    border-color: $--color-info-light !important;

    @include e(header) {
      color: $--color-info;
      background-color: $--color-info-light;
      border-color: $--color-info-light;
    }
  }
}