/// tabular-layout.less -- Adds a layout containing several tabs


#tabular-layout() {
  tab-height: 80px;
}

.tabular-layout {
  display: grid;
  grid-template-areas:
  'tab-listing'
    'active-page';
  grid-template-rows: #tabular-layout[tab-height] 1fr;
  
  > .sidebar {
    display: flex;
    flex-direction: column;
  }

  > .tab-listing {
    grid-area: tab-listing;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 1em;
    
    &.tab-count-1 , &.tab-count-2 , &.tab-count-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    &.tab-count-4 , &.tab-count-5 {
      grid-template-columns: repeat(5, 1fr);
    }

    @media #media[tablet-query] {
      display: none;
      grid-area: none;
    }

    > .tab {
      #mixin.noselect();
      #mixin.box-shadow.main-light();
      align-items: center;
      background-color: #color[offwhite2];
      border-top-left-radius: 0.7em;
      border-top-right-radius: 0.7em;
      color: #color[dark-purple];
      cursor: pointer;
      display: flex;
      font-size: 1.2em;
	    line-height: 1.4em;
	    text-align: center;
      height: 100%;
      justify-content: center;
      padding: 0 0.5em;
      transition: 0.07s all ease-in;

      &.active {
        #mixin.box-shadow.none();
        color: #color[secondary-accent];
        background-color: white;
        z-index: 1;
      }

      &:hover:not(.active) {
        background-color: darken(#color[offwhite2], 5%);
      }
    }
  }

  > .mobile-tab-listing {
    display: none;
    grid-area: none;
    justify-content: center;
    align-items: center;

    @media #media[tablet-query] {
      display: flex;
      width: 100%;
      grid-area: tab-listing;
    }

    > .ethlance-select-input {
      width: 80%;

      > .main > .label {
        font-weight: 700;
      }
    }
  }

  > .active-page {
    #mixin.box-shadow.main();
    grid-area: active-page;
    background-color: white;
    border-bottom-left-radius: 0.7em;
    border-bottom-right-radius: 0.7em;
  }
}
