@import '../../style/variable';
@import './token';

.#{$namespace} {
  &-cat {
    &:not(:last-child) {
      margin-bottom: $cat-margin-bottom;
    }

    &--fit {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    &__header {
      margin-bottom: $cat-header-margin-bottom;

      display: flex;
      flex-direction: row;
      align-items: center;

      &-title {
        flex-shrink: 0;

        font-size: $cat-title-fz;
        color: $cat-title-color;
        font-weight: bold;
      }

      &-center {
        flex: 1;
      }

      &-suffix {
        flex-shrink: 0;        
      }
    }

    &__body {
      position: relative;

      &--fit {
       flex: 1;
       overflow: auto;
      }
    }
  }
}