$c-tabslider-bp: 500;
$c-tabslider-bp2: 800;
$c-tabslider-bp3: 1200;
$c-tabslider-bp4: 1500;

.c-tabslider {
  position: relative;
  z-index: 0;

  @include mq($c-tabslider-bp3) {
    display: grid;
    grid-template-columns: 4fr 8fr;
  }
}

.c-tabslider__nav {
  width: 100%;

  @include mq($c-tabslider-bp) {
    margin: 0 auto;
  }

  @include mq($c-tabslider-bp3) {
    @include flex(column space-between);
    margin-left: 25%;
    width: 75%;
  }

  h2 {
    margin-bottom: 30px;
    @include mq($c-tabslider-bp3) {
      margin-bottom: 80px;
    }

  }
}

.c-tabslider__buttons {
  display: grid;
  grid-template-columns: 1fr;
  @include mq($c-tabslider-bp) {
    grid-template-columns: 1fr 1fr;
  }
  grid-row-gap: 15px;
  height: 100%;
  width: 100%;
  margin-bottom: 30px;

  @include mq($c-tabslider-bp3) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
}

.c-tabslider__button {
  @include font(mid, 28, 700);
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  border: none;
  color: palette(text, 200);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
  text-align: left;

  svg {
    height: 20px;
    width: 20px;
    display: inline-block;
    margin-right: 20px;
  }

  @include mq($max: $c-tabslider-bp) {
    display: inline-flex;
  }

  @include mq($c-tabslider-bp, $max: $c-tabslider-bp2) {
    @include font(small, 20, 700);
  }

  &:hover {
    opacity: 0.8;
  }

  &:focus {
    outline: none;
  }

  &.is-active {
    color: palette(action);
    opacity: 1;
  }
}

.c-tabslider__container {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
}

.c-tabslider__content {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 0;
  pointer-events: none;
  position: relative;

  img {
    width: 100%;
    position: relative;
  }

  &.is-active {
    opacity: 1;
    z-index: 1;
    pointer-events: all;
  }
}

.c-tabslider__content__info-block {
  position: relative;
  width: 100%;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(palette(dark), 0.95) 70%, rgba(palette(dark), 0.9) calc(100% - 60px), rgba(palette(dark), 0.4) 100%);

  @include mq($c-tabslider-bp) {
    padding: 0 60px 60px 60px;
  }

  @include mq($c-tabslider-bp3) {
    position: absolute;
    width: 75%;
  }

  @include mq($c-tabslider-bp4) {
    width: 50%;
  }

  .icon {
    width: 60px;
    height: 60px;
    display: none;
    position: absolute;
    right: -30px;
    top: 0;

    &.power {
      width: 80px;
      right: -20px;
      top: 20px;
      transform: rotate(90deg);
    }

    @include mq($c-tabslider-bp, $c-tabslider-bp2) {
      right: 0 !important;
      transform-origin: 100% 0;
      transform: scale3d(0.8, 0.8, 1);
    }

    @include mq($c-tabslider-bp) {
      display: block;
    }
  }

  h2 {
    margin-bottom: 30px;

    @include mq($max: $c-tabslider-bp) {
      padding-left: 30px;
    }
  }

  a {
    display: inline-block;
    margin-top: 25px;
    text-decoration: none;

    &:after {
      display: inline-block;
      content: "\003e";
      margin-left: 20px;
      transform: scale(0.75, 1.5);
      position: relative;
      top: 1px;
    }
  }

  &:before {
    content: '';
    display: block;
    height: 60px;
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, transparent 0, transparent 59px, palette(dark) 60px) -24px 0;
    background-size: calc(100% + 60px);
  }
}

/**
 * Modifier with buttons that have a circle connected by a line to indicate a 'flow'
 */

.c-tabslider--flow {
  $circle-size: 24px;
  $circle-border-size: 1px;

  .c-tabslider__nav {
    border-bottom: none;

    @include mq($c-tabslider-bp) {
      position: relative;
      overflow: hidden;

      // Line behind the whole nav instead of on each button
      &::after {
        position: absolute;
        z-index: -2;
        content: '';
        display: block;
        width: 60%;
        height: 1px;
        top: #{$circle-size/2};
        left: 50%;
        transform: translateX(-50%);
        background-color: palette(neutral, 100);
      }
    }
  }

  .c-tabslider__button {
    @include font-size(small);
    margin: 0 0 0 30px;
    padding: 0;
    color: rgba(palette(text), 0.3);
    text-align: left;

    .ie & {
      display: block !important;
      flex: inherit !important;
    }

    @include mq($c-tabslider-bp) {
      @include flex(column flex-start);
      flex: 1 1 10px;
      align-items: center;
      position: relative;
      z-index: 0;
      text-align: center;
      max-width: 170px;
      margin: 0;
      padding-top: 25px + 16px;
    }

    @include mq($c-tabslider-bp2) {
      @include font-size(mid);
      max-width: 222px;
    }

    // Circle
    &::before {
      z-index: -1;
      left: -30px;
      top: -2px;
      width: $circle-size;
      height: $circle-size;
      border-radius: 100%;
      border: $circle-border-size solid transparent;
      padding: 3px;
      background-clip: content-box;
      background-color: palette(neutral, 100);
      color: palette(action);
      opacity: 1;
      transform: none;
      transition-property: border, background-color;
      transition-duration: .25s;
      transition-timing-function: ease-out, linear;

      @include mq($c-tabslider-bp) {
        top: 0;
        left: calc(50% - #{$circle-size/2});
      }
    }

    // Line
    &::after {
      position: absolute;
      z-index: -2;
      content: '';
      display: block;
      height: 40px + 8px + 8px;
      width: 1px;
      top: -40px - 8px;
      left: calc(-30px + #{$circle-size/2});
      background-color: palette(neutral, 100);
      pointer-events: none;

      @include mq($c-tabslider-bp) {
        visibility: hidden;
      }
    }

    // hide line on first child when stacked
    &:first-child {
      &:after {
        @include mq($max: $c-tabslider-bp) {
          visibility: hidden;
        }
      }
    }

    // Put little line on top to connect to the middle line (L+R)
    &:first-child,
    &:last-child {
      &:after {
        @include mq($c-tabslider-bp) {
          width: 60%;
          height: 1px;
          top: #{$circle-size/2};
          left: 50%;
          background: palette(neutral, 100);
          visibility: visible;
        }
      }
    }

    &:last-child {
      &:after {
        @include mq($c-tabslider-bp) {
          left: auto;
          right: 50%;
        }
      }
    }

    // Create vertical spacing when stacked
    & + .c-tabslider__button {
      @include mq($max: $c-tabslider-bp) {
        margin-top: 40px;
      }
    }

    &:hover,
    &:focus {
      color: palette(text, 200);

      &::before {
        background-color: palette(neutral, 200);
      }
    }

    // Active state of the button
    &.is-active {
      color: palette(text);

      // Extra ring around circle when active
      &::before {
        background-color: palette(action);
        border-color: palette(action);
      }
    }
  }
}