/* Tab definition */
.tabs {
  position: relative;
  overflow: hidden;

  & > label img {
    float: left;
    margin-left: 0.6em; /* assuming picnic-separation is ~0.6em */
  }

  & > .row {
    width: calc(100% + 1.2em);
    display: table;
    table-layout: fixed;
    position: relative;
    padding-left: 0;
    transition: all 0.3s;
    border-spacing: 0;
    margin: 0;

    &::before,
    &::after {
      display: none;
    }

    & > *,
    & img {
      display: table-cell;
      vertical-align: top;
      margin: 0;
      width: 100%;
    }
  }

  & > input {
    display: none;

    & + * {
      width: 100%;
    }

    & + label {
      width: auto;
    }
  }

  /* Two-tab variant */
  &.two {
    & > .row {
      width: 200%;
      left: -100%;
    }

    & > input:nth-of-type(1):checked ~ .row {
      margin-left: 100%;
    }

    & > label img {
      width: 48%;
      margin: 4% 0 4% 4%;
    }
  }

  /* Three-tab variant */
  &.three {
    & > .row {
      width: 300%;
      left: -200%;
    }

    & > input:nth-of-type(1):checked ~ .row {
      margin-left: 200%;
    }

    & > input:nth-of-type(2):checked ~ .row {
      margin-left: 100%;
    }

    & > label img {
      width: 30%;
      margin: 5% 0 5% 5%;
    }
  }

  /* First label exception */
  & > label:first-of-type img {
    margin-left: 0;
  }
}