@import "common/var";
@import "mixins/mixins";

@include b(box) {
  border-radius: $--box-border-radius;
  background-color: $--color-white;
  overflow: hidden;
  color: $--color-text-primary;
  transition: 0.3s;
  position: relative;

  @include e(title) {
    display: block;
    height: 1px;
    width: 100%;
    margin: 20px 0;
    background-color: $--border-color-base;
    position: relative;

    @include m(text) {
      position: absolute;
      background-color: $--color-white;
      padding: 0 20px;
      font-weight: 500;
      color: $--color-text-primary;
      font-size: 14px;

      @include when(left) {
        left: 20px;
        transform: translateY(-50%);
      }

      @include when(center)  {
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }

      @include when(right)  {
        right: 20px;
        transform: translateY(-50%);
      }
    }
  }

  @include e(body) {
    padding: $--box-padding;
    border: 1px solid $--border-color-base;
    border-top: none;
    margin-top: -20px;
  }
}