// Add common style
@mixin collapse-size {
  .ebs-collapse__header,
  .ebs-collapse__body {
    @content;
  }
}

.ebs-collapse {
  width: 100%;
  border: 1px solid $collapse-border-color;
  border-radius: rem($collapse-border-radius);
  background-color: #fff;
  overflow: hidden;

  &__header {
    background-color: $collapse-header-bg-color;
    border-bottom: 1px solid $collapse-border-color;
    width: 100%;
    display: flex;
    justify-content: space-between;

    &:hover {
      cursor: pointer;
    }

    &--collapsed {
      border-bottom: 0;
    }

    &--bordered:not(&.ebs-collapse__header--collapsed) {
      border-bottom: 2px solid $collapse-bordered-color;
    }

    // Content
    &__title {
      flex: 1;
    }

    &__toggle {
      padding-left: rem(12px);
      @include flex-center;

      &:hover {
        cursor: pointer;
      }

      .ebs-icon {
        font-size: rem(14px);
        color: $grey-600;
      }
    }
  }

  &__body {
    background-color: $collapse-body-bg-color;
    transition: padding 400ms;
  }

  // Group
  &__group {
    width: 100%;
    border: 1px solid $collapse-border-color;
    border-radius: rem($collapse-border-radius);
    box-shadow: $collapse-group-box-shadow;
    overflow: hidden;

    .ebs-collapse {
      border: 0;
      border-radius: 0;

      &:not(:last-child) {
        border-bottom: 1px solid $collapse-border-color;
      }
    }
  }

  // Size
  &--small {
    @include collapse-size {
      padding: rem($collapse-padding-y-sm $collapse-padding-x-sm);
    }
  }

  &--medium {
    @include collapse-size {
      padding: rem($collapse-padding-y $collapse-padding-x);
    }
  }

  &--large {
    @include collapse-size {
      padding: rem($collapse-padding-y-lg $collapse-padding-x-lg);
    }
  }
}
