@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import '../../../node_modules/bulma/sass/utilities/mixins.sass';


.purdue-home-tabs-horizontal{
  // background: $black;

  &__heading{
    color: $boiler-gold;
    font-family: $united-sans-condensed;
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    line-height: 1.5;
    padding:0.5rem 1.5rem;
    border: 2px solid $boiler-gold;
    border-radius: 4px;
    display:inline-block;
    @include mobile{
      font-size: 1rem;
    }
  }
  &__headers{
  display:flex;
  flex-direction:row;
  // justify-content: space-between;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: 100%;
  overscroll-behavior-inline: contain;

  &::-webkit-scrollbar {
    // display: none;
    width: 100%;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #333;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #222;
  }

  button{
    padding-bottom: 1.5rem;
  }

  

  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 85%;
    background: linear-gradient(to right, transparent, black);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease-in;
  }
  &:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;   
    width: 140px;
    height: 85%;
    opacity: 0;
    background: linear-gradient(to left, transparent, black);
    pointer-events: none;
    z-index: 1;
  }

  &.scroll-start{
    &::before{
      opacity: 0;
      transition: opacity 0.2s ease-out;
      background: linear-gradient(to left, transparent, black);
    }
  }

  &.scroll-end{
    &::after{
      opacity: 0;
      transition: opacity 0.2s ease-out;
    }
    &::before{
      content: "";

      opacity: 1;
      transition: opacity 0.2s ease-in;
    }
  }

  &.scrolling{
    &::before{
      opacity: 1;
      transition: opacity 0.2s ease-in;
    }
  }

  @include mobile{
    margin-top:1rem;
  }
  }
  &__header{
    display:block;
    color: #FFFFFF;
    font-family: $acumin-pro;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    border:none;
    background:none;
    position: relative;
    padding:1rem 0;
    cursor: pointer;
    text-align:left;
    padding-right:2rem;
    @include touch{
      padding-right:3rem;
    }
    @include mobile{
      padding-right:0;
    }
    &:hover{
      .purdue-home-tabs__header-text{
        list-style: none;
        
        &:after{
          transform: scaleX(100%);
          visibility:visible;
        }
      }
    }
    &.active{
      .purdue-home-tabs__header-text{
        &:after{
          transform: scaleX(100%);
          visibility:visible;
        }
      }
    }
    @include mobile{
      display:none;
    }
    &-mobile{
      display:none;
      @include mobile{
        display:flex;
        justify-content: space-between;
        width:100%;
        background:transparent;
        padding:1.75rem 4rem 1.75rem 0;
        border:none;
        cursor: pointer;
        width:100%;
        text-align: left;
        border-top:1px solid $steam-gray;
        align-items: flex-end;
        position:relative;
        z-index:20;
        &:after{
          content:"";
          background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='52px' height='52px' viewBox='0 0 52 52' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eplus_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='plus_icon' stroke='%23cfb991' stroke-width='4'%3E%3Ccircle id='Oval-Copy-3' cx='26' cy='26' r='24'%3E%3C/circle%3E%3Cline x1='26.5' y1='14' x2='26.5' y2='38' id='Path-6' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Cline x1='25.6896552' y1='14.5116279' x2='25.6896552' y2='38.6976744' id='Path-6' stroke-linecap='round' stroke-linejoin='round' transform='translate(25.6897, 26.6047) rotate(-90) translate(-25.6897, -26.6047)'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");             
          width: 45px;
          height:45px;
          background-repeat: no-repeat;
          background-size: cover;
          position: absolute;
          right: 0;
          top: calc(50% - 22.5px);
          transition: all 0.3s ease;
        }
        &.active{
          &:after{
            transform: rotate(45deg);
          }
          .purdue-home-tabs__header-text{
            &:after{
              transform: scaleX(100%);
              visibility:visible;
            }
          }
        }
        &:hover{
          .purdue-home-tabs__header-text{
            &:after{
              transform: scaleX(100%);
              visibility:visible;
            }
          }
        }
      }
      .purdue-home-tabs__header-text{
        @include mobile{
          font-size:2rem;
          margin-right:1rem;
          white-space: wrap;
        }
      }
    }
  }
  &__header-text{
   /* &__header-text{
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.1;
    }*/
    color: #FFFFFF;
    font-family: $acumin-pro;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    position: relative;
    display: inline-block;
    white-space: nowrap;
    // added for wrapping on mobile
    @include mobile{
      white-space: wrap;
    }
    
    &:after{
      content: "";
      height: 2px;
      width: 100%;
      position: absolute;
      display: block;
      bottom: -8px;
      left: 0;
      visibility: hidden;
      background: #CFB991;
      transform: scaleX(0);
      transition: all 0.25s cubic-bezier(1, 0.25, 0, 0.75) 0s;
    }
  }

  &.has-white-background{
    .purdue-home-tabs-horizontal__header-text{
      color: #000;
    }
  }
  &.has-gray-background{
    .purdue-home-tabs-horizontal__header-text{
      color: #000;
    }
  }
  &__panel{
    transition: all 0.3s;
    height:0;
    opacity: 0;
    color:$white;
    padding-left:0rem;
    z-index: 0;
    position: relative;
    display: none;
    p a{
      color:$boiler-gold;
      &:hover{
        color:$boiler-gold;
      }
    }
    @include touch{
      padding-left:0;
    }
    @include mobile{
      padding-left:0;
    }
    &.active{
        display:block;
        height:auto;
        opacity: 1;
        animation: fadeIn 1s;
        z-index: 10;
        @include mobile{
          padding-bottom:2rem;
          padding-top:2rem;
        }

    }
    &:last-child{
      @include mobile{
        border-bottom: 1px solid $steam-gray;
      }
    }
  }
  .tab-content {
    margin-top: 2rem;
    .column {
      border-bottom: none !important;
    }
  }
  > .section > .container:not(.tab-content) {
    .column:first-child{
      border-bottom:2px solid $steam-gray;
      position:relative;
      overflow-x: clip;
      margin: 0 12px;
      padding-left: 0;
      padding-right: 0;
      @include mobile{
        border-bottom:none;
      }
    }
    .column:last-child{
      position:relative;
      @include mobile{
        &:after{
          content:"";
          position:absolute;
          bottom:0.75rem;
          left:0.75rem;
          width:calc(100% - 24px);
          border-bottom: 1px solid $steam-gray;
          display: none;
        }
      }
    }
  }

  .arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: -12px;
    transform: rotate(135deg);
    background: $black;
    border-right:2px solid $steam-gray;
    border-top:2px solid $steam-gray;
    transition: all 0.3s ease;
    @include mobile{
      display:none;
    }
  }
  .tagged-header{
    margin-left: 10px;
    margin-bottom: 0;
    z-index: 2;
  }
 }






.has-gray-background {
  &.purdue-home-tabs-horizontal{
    .arrow {
      background: $grey-lighter;
    }
  }
  .purdue-home-tabs-horizontal {
    &__headers{
      &::after {
        background: linear-gradient(to right, transparent, $grey-lighter);
      }
      &::before {
        background: linear-gradient(to left, transparent, $grey-lighter);
      }
    }


    &__header {
      &-mobile{
        @include mobile{
          &:after{
            content:"";
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='52px' height='52px' viewBox='0 0 52 52' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eplus_icon%3C/title%3E%3Cg id='Desktop' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='plus_icon' stroke='%23000000' stroke-width='4'%3E%3Ccircle id='Oval-Copy-3' cx='26' cy='26' r='24'%3E%3C/circle%3E%3Cline x1='26.5' y1='14' x2='26.5' y2='38' id='Path-6' stroke-linecap='round' stroke-linejoin='round'%3E%3C/line%3E%3Cline x1='25.6896552' y1='14.5116279' x2='25.6896552' y2='38.6976744' id='Path-6' stroke-linecap='round' stroke-linejoin='round' transform='translate(25.6897, 26.6047) rotate(-90) translate(-25.6897, -26.6047)'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E");             
          }
          &.active{
            &:after{
              transform: rotate(45deg);
            }
            .purdue-home-tabs__header-text{
              &:after{
                transform: scaleX(100%);
                visibility:visible;
              }
            }
          }
          &:hover{
            .purdue-home-tabs__header-text{
              &:after{
                transform: scaleX(100%);
                visibility:visible;
              }
            }
          }
        }
        .purdue-home-tabs__header-text{
          @include mobile{
            font-size:2rem;
            margin-right:1rem;
            white-space: wrap;
          }
        }
      }
    }


    
  }


}






.has-white-background {
  &.purdue-home-tabs-horizontal{
    .arrow {
      background: $white;
    }
  }
  .purdue-home-tabs-horizontal {
    &__headers{
      &::after {
        background: linear-gradient(to right, transparent, $white);
      }
      &::before {
        background: linear-gradient(to left, transparent, $white);
      }
    }
  }
}