.c-side-tabs

scss
.c-side-tabs {
  display: grid;
  height: 92vh;

  @include element('nav') {
    background-color: use-color('base', 'true-white');
    display: flex;
    height: 45px;
    justify-content: space-around;
    margin-bottom: 8px;
    padding: 8px 8px 0;
    text-align: center;

    label {
      @include use-font('subheading', 'bold');
      align-items: center;
      border-bottom: solid 1px use-color('complementary', 'light');
      color: use-color('grey', 'light-i');
      cursor: pointer;
      display: flex;
      justify-content: center;
      padding: 4px 8px;
      width: 100%;
      z-index: use-layer('base');

      span {
        display: flex;
        line-height: 1;
        margin-right: 8px;
      }
    }
  }

  [type='radio'] {
    display: none;
  }

  [class^='c-side-tab-'] {
    display: none;
    height: fit-content;
    padding: 4px 16px;

    // overrides
    .c-indicator-group {
      margin: 0 0 8px;
    }

    .c-input {
      margin-bottom: 0;

      &__prefix {
        margin-bottom: 0;
      }
    }

    .c-side-content {
      &__actions {
        padding: 8px;
      }
    }

  }
  
  .u-scrolling-content {
    height: 60vh;
  }
}

Tabs generados para ser usados dentro del componente c-side-content

Example

html
<div class="c-side-tabs">
  <input type="radio" name="tab" id="c-side-tab-st" checked></input>
  <input type="radio" name="tab" id="c-side-tab-nd"></input>

  <nav class="c-side-tabs__nav">
    <label for="c-side-tab-st">
      <span class="icon-agents-b"></span>
      Agentes
    </label>
    <label for="c-side-tab-nd">
      <span class="icon-campaign"></span>
      Campañas
    </label>
  </nav>

  <div class="c-side-tab-st-content c-side-content__content">
    <div class="c-indicator-group">
      <div class="c-indicator-count">
        <span class="c-indicator-count__number">
          125
        </span>
        <label class="c-indicator-count__label">
          Agentes Activos
        </label>
      </div>

      <div class="c-indicator-count">
        <span class="c-indicator-count__number">
          25
        </span>
        <label class="c-indicator-count__label">
          Agentes Inactivos
        </label>
      </div>
    </div>

    <span class="c-input-wrapper c-input-wrapper--prefix">
      <span class="c-input__prefix">
        <span class="icon-search"></span>
      </span>
      <input type="text" class="c-input" placeholder="Buscar" />
    </span>
  </div>

  <div class="c-side-tab-st-content c-side-content__content u-scrolling-content">

    <div class="c-transfer-card c-transfer-card--selected">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
          
          <span class="c-transfer-card__status-badge"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>Charlie</label>
          <span class="c-transfer-card__data--rol">Rol Usuario</span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>8</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña
          </li>
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña 2
          </li>
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña 3
          </li>
        </ul>
      </div>  
    </div>

    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <img src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png"/>
          
          <span class="c-transfer-card__status-badge c-transfer-card__status-badge--paused"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>Vinnie Daniel</label>
          <span class="c-transfer-card__data--rol">Rol Usuario</span>
          <span class="c-transfer-card__data--time">
            en pausa <span>(27min)</span> 
          </span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>3</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña
          </li>
        </ul>
      </div>  
    </div>

    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
          
          <span class="c-transfer-card__status-badge c-transfer-card__status-badge--offline"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>Ben Ricker</label>
          <span class="c-transfer-card__data--rol">Rol Usuario</span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>3</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña
          </li>
        </ul>
      </div>  
    </div>
    
    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <img src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png"/>
          
          <span class="c-transfer-card__status-badge c-transfer-card__status-badge--paused"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>Vinnie Daniel</label>
          <span class="c-transfer-card__data--rol">Rol Usuario</span>
          <span class="c-transfer-card__data--time">
            en pausa <span>(27min)</span> 
          </span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>3</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña
          </li>
        </ul>
      </div>  
    </div>

    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
          
          <span class="c-transfer-card__status-badge c-transfer-card__status-badge--offline"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>Ben Ricker</label>
          <span class="c-transfer-card__data--rol">Rol Usuario</span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>3</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="app-c-list-channels app-c-list-channels--alt-wicon">
          <li class="app-c-list-channels__item u-tag-wicon--campaign">
            Nombre Campaña
          </li>
        </ul>
      </div>  
    </div>
  </div>
  
  <div class="c-side-tab-st-content c-side-content__actions">
    <a class="c-button c-button--primary c-button--thin" href="" disabled>
      Transferir
    </a>
  </div>

  <div class="c-side-tab-nd-content c-side-content__content">
    <div class="c-indicator-group">
      <div class="c-indicator-count">
        <span class="c-indicator-count__number">
          150
        </span>
        <label class="c-indicator-count__label">
          campañas activas
        </label>
      </div>
    </div>

    <span class="c-input-wrapper c-input-wrapper--prefix">
      <span class="c-input__prefix">
        <span class="icon-search"></span>
      </span>
      <input type="text" class="c-input" placeholder="Buscar" />
    </span>
  </div>

  <div class="c-side-tab-nd-content c-side-content__content u-scrolling-content">
    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <span class="icon-campaign-circle"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>
            Campaña navidad 2020_lorem ipsum lorem
          </label>
          <span class="c-transfer-card__data--rol">
            Descripción campaña lorem ipsum, lorem ipsum
          </span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>28</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="c-list c-list--social-media">
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/instagram-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/telegram-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/messenger-channel.svg"/>
          </li>
        </ul>
      </div>  
    </div>
    
    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <span class="icon-campaign-circle"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>
            Campaña navidad 2020_lorem ipsum lorem
          </label>
          <span class="c-transfer-card__data--rol">
            Descripción campaña lorem ipsum, lorem ipsum
          </span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>28</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="c-list c-list--social-media">
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/whatsapp-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/email-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/messenger-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/widget-channel.svg"/>
          </li>
        </ul>
      </div>  
    </div>
    
    <div class="c-transfer-card">
      <div class="c-transfer-card__section">
        <div class="c-transfer-card__avatar">
          <span class="icon-campaign-circle"></span>
        </div>

        <div class="c-transfer-card__data">
          <label>
            Campaña navidad 2020_lorem ipsum lorem
          </label>
          <span class="c-transfer-card__data--rol">
            Descripción campaña lorem ipsum, lorem ipsum
          </span>
        </div>
      </div>

      <div class="c-transfer-card__section c-transfer-card__section--attendees">
        <strong>28</strong> chats asignados
      </div>

      <div class="c-transfer-card__section">
        <ul class="c-list c-list--social-media">
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/twitter-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/facebook-channel.svg"/>
          </li>
          <li>
            <img src="https://cdn.chattigo.com/assets/img/channels/hangout-channel.svg"/>
          </li>
        </ul>
      </div>  
    </div>
  </div>

  <div class="c-side-tab-nd-content c-side-content__actions">
    <a class="c-button c-button--primary c-button--thin" href="" disabled>
      Transferir Chat
    </a>
  </div>
</div>