@use 'colours';


.tab-set > input[type='radio'] {
  display: none
}

.tab-set > input,
.tab-set > section > div {
  display: none;
}

.tab1selector:checked ~ section > .tab1,
.tab2selector:checked ~ section > .tab2,
.tab3selector:checked ~ section > .tab3,
.tab4selector:checked ~ section > .tab4,
.tab5selector:checked ~ section > .tab5,
.tab6selector:checked ~ section > .tab6,
.tab7selector:checked ~ section > .tab7,
.tab8selector:checked ~ section > .tab8,
.tab9selector:checked ~ section > .tab9,
.tab10selector:checked ~ section > .tab10
{
  display: block;
}


.tab-set {
  width: 100%;

  > nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    border-bottom: 1px solid colours.$colour-divider;
    width: 100%;

    > li {
      margin-bottom: 0;
      padding-right: 0;
      transform: unset;

      &:before {
        content: '';
        display: none;
      }

      > label {
        float: left;
        padding: 15px 25px;
        border-bottom: 5px solid transparent;
        color: colours.$colour-admiralty-blue;
        &:hover {
          background-color: colours.$colour-tab-hover;
        }
      }
      &:not(:last-child) > label {
        border-right-width: 0;
      }
    }
  }

  > section {
    clear: both;
    border: 1px solid colours.$colour-divider;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    margin: 20px 0 30px 0;

    > div {
      padding: 20px;
      width: 100%;
    }
  }
}

.tab1selector:checked ~ nav > ul li.tab1,
.tab2selector:checked ~ nav > ul li.tab2,
.tab3selector:checked ~ nav > ul li.tab3,
.tab4selector:checked ~ nav > ul li.tab4,
.tab5selector:checked ~ nav > ul li.tab5,
.tab6selector:checked ~ nav > ul li.tab6,
.tab7selector:checked ~ nav > ul li.tab7,
.tab8selector:checked ~ nav > ul li.tab8,
.tab9selector:checked ~ nav > ul li.tab9,
.tab10selector:checked ~ nav > ul li.tab10
{
  > label {
    border-bottom: 5px solid colours.$colour-admiralty-blue;
  }
}