@layer components {
  .tab-panel {
    container-name: tab-panel;
    container-type: inline-size;
    display: grid;

    a.tab:link, a.tab:visited {
      text-decoration: none;
      font-size: 12px;
    }

    .section-tabs {

      margin:5px 0 10px 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
      width: 100%;
      border-radius: 5px;

      .section-tab {
        padding-top:2px;
        padding-bottom:2px;
        text-decoration: none !important;
        display: flex;
        justify-content: center;
        border-radius: 5px;
        align-items: center;
        gap:5px;
        font-size: 12px;
        border: 1px solid var(--EEE);
        &.current {
          background-color: var(--FFF);
          border: 1px solid var(--CCC);
        }
      }
    }

    .tab {
      gap: 5px;
      height: 53px;
      font-size: 11px;
      min-width: 53px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      color: var(--ui-800);

      &.current {
        border-bottom-color: transparent;
      }

      &:last-child {
        border-right: none;
      }

      i {
          font-size: 22px;
          color: var(-signal);
      }
    }

  }
}