@use "sass:math";

// Version: 2.9.3
.is-tns-gallery:not(.tns-slider) {
  display: none;
}

.tns-outer {
  position: relative;
  padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width

  [hidden] {
    display: none !important;
  }

  [aria-controls]:not(:disabled),
  [data-action]:not(:disabled) {
    cursor: pointer;
  }
}

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;

  >.tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.tns-horizontal {
  &.tns-subpixel {
    white-space: nowrap;

    >.tns-item {
      display: inline-block;
      vertical-align: top;
      white-space: normal;
    }
  }

  &.tns-no-subpixel {
    &:after {
      content: '';
      display: table;
      clear: both;
    }

    >.tns-item {
      float: left;
    }
  }

  &.tns-carousel {
    &.tns-no-subpixel {
      >.tns-item {
        margin-right: -100%;
      }
    }
  }
}

.tns-no-calc {
  position: relative;
  left: 0;
}

.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px; // make sure slider container is visible

  // overflow: hidden;
  >.tns-item {
    position: absolute;
    left: -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition: transform 0s, opacity 0s;
    transition: transform 0s, opacity 0s;
  }

  >.tns-slide-active {
    position: relative;
    left: auto !important;
  }

  >.tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
  }
}

.tns-autowidth {
  display: inline-block;
}

.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6;

  &.tns-complete {
    opacity: 1;
  }
}

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}

.tns-ovh {
  overflow: hidden;
}

.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}

.tns-transparent {
  opacity: 0;
  visibility: hidden;
}

.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0;
}

.tns-normal,
.tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}


// *** Fix a viewport issue in initialization
.tns-vpfix {
  white-space: nowrap;

  >div,
  >li {
    display: inline-block;
  }
}

// *** Detecting browser capability ***
$width: 310px;
$height: 10px;
$count: 70;
$perpage: 3;

.tns-t {
  &-subp2 {
    margin: 0 auto;
    width: $width;
    position: relative;
    height: $height;
    overflow: hidden;
  }

  &-ct {
    width: math.div(100% * $count, $perpage);
    width: -webkit-calc(100% * #{$count} / #{$perpage});
    width: -moz-calc(100% * #{$count} / #{$perpage});
    width: calc(100% * #{$count} / #{$perpage});
    position: absolute;
    right: 0;

    &:after {
      content: '';
      display: table;
      clear: both;
    }

    >div {
      width: math.div(100%, $count);
      width: -webkit-calc(100% / #{$count});
      width: -moz-calc(100% / #{$count});
      width: calc(100% / #{$count});
      height: $height;
      float: left;
    }
  }
}

.tns-nav {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
  padding-bottom: 2rem;

  button {
    display: block;
    margin: 5px;
    padding: 0;
    width: 10px;
    height: 10px;
    background-color: var(--gray-400);
    border: 1px solid transparent;
    outline: none;
    border-radius: 5px;
    transition: all .25s ease;
    cursor: pointer;
    user-select: none;

    &:hover {
      background-color: var(--template-primary-color);
    }

    &.tns-nav-active {
      width: 24px;
      background-color: var(--template-primary-color);
    }
  }

  &:last-child,
  &:nth-last-child(2) {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
  }
}

.tns-controls {
  button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 50%;
    padding: 0.5rem 0.7rem;
    margin: 0;
    color: var(--body-color);
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 1.8rem;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.25s ease-in;
    z-index: 12;

    &:last-child {
      left: auto;
      right: 0;
    }

    &:disabled {
      opacity: 0.5;
      cursor: default;
    }
  }
}

.tns-outer {
  &:hover {
    .tns-controls {
      button {
        &:not(:disabled) {
          opacity: 1;
        }
      }
    }
  }
}

@media (min-width: 1500px) {
  .container-xxl {
    .tns-controls {
      button {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        left: -3rem;
        right: auto;
        transform: translate(-3rem, -50%);
        opacity: 0;
  
        &:disabled {
          opacity: 0;
        }
  
        &:last-child {
          right: -3rem;
          left: auto;
          transform: translate(3rem, -50%);
        }
      }
    }
  
    .tns-outer {
      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3.5rem;
      }
  
      &:before {
        left: -3.5rem;
      }
  
      &:after {
        right: -3.5rem;
      }
  
      &:hover {
        .tns-controls {
          button {
            transform: translate(0, -50%);
            opacity: 1;
  
            &:disabled {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}