@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";
@import "../../../_fonts/fontawesome/scss/fontawesome";
@import "../../../_fonts/fontawesome/scss/regular";

@import "../../scss-variables";
@import "../../_theme/variables-layout";


html body {
  .ce_rsce_contentslider {

    .swiper-pagination {
      position: static;
      margin-top: .5rem;
    }

    .horizontal {
      &.content-slider--nav {
        ul {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
          display: flex;
          flex-flow: row nowrap;
          @include font-size(24px);
          position: relative;
          gap: rfs-value(35px);

          &:before {
            content: '';
            height: 1px;
            width: 120%;
            position: absolute;
            left: -10%;
            top: 0;
            background-color: var(--bs-primary);
          }


          li {
            transition: all .3s ease;

            span, a {
              display: block;
              line-height: rfs-value(40px);
              border-top: 3px solid transparent;
              transition: all .3s ease;
              cursor: pointer;
              text-decoration: none;
            }

            &.active {
              padding-right: 2rem;

              span, a {
                font-weight: $font-weight-bold;
                border-top-color: var(--bs-primary);
              }
            }

            &:hover {
              span, a {
                border-top-color: var(--bs-primary);
              }
            }
          }
        }
      }
    }

    .vertical {
      @include media-breakpoint-up(md) {
        margin-left: calc(0px - (.75rem + 30px));
      }


      &.content-slider--nav {
        position: relative;
        display: inline-block;
        max-height: rfs-value(300px);
        overflow: auto;
        width: 100%;

        @include media-breakpoint-up(sm) {
          max-height: rfs-value(350px);
        }

        &:after, &:before {
          z-index: 10;
          content: '';
          height: 15%;
          min-height: 100px;
          width: 100%;
          left: 0;
          position: absolute;
          transition: all .3s ease;
        }

        &:before {
          top: 0;
          background: linear-gradient(180deg, rgba(255, 255, 255, 1) 15%, transparent 100%);
        }

        &:after {
          bottom: 0;
          background: linear-gradient(0deg, rgba(255, 255, 255, 1) 15%, transparent 100%);
        }

        &:hover {
          &:after, &:before {
            max-height: 0px;
            height: 0px;
            min-height: 0px;
          }
        }

        ul {
          list-style-type: none;
          margin: 0px;
          padding: 25px 0px;
          @include font-size(28px);
          position: relative;

          overflow: auto;
          gap: rfs-value(35px);

          max-height: rfs-value(300px);

          li {
            transition: all .3s ease;
            position: relative;

            &:not(:last-child) {
              margin-bottom: .25rem;
            }

            span, a {
              border: 1px solid transparent;
              display: block;
              transition: all .3s ease;
              border-radius: var(--bs-border-radius-xl);
              cursor: pointer;
              padding: 0rem 1rem 0rem .25rem;
              font-weight: $font-weight-bold;
              min-width: rfs-value(250px);
              color: var(--bs-primary);
              text-decoration: none;
              line-height: var(--bs-body-line-height);

              &:before {
                @extend %fa-icon;
                @extend .far;
                content: fa-content($fa-var-exchange);
                transition: all .3s ease;

                color: var(--bs-primary);
                border-radius: 10px;
                border: 1px solid var(--bs-primary);
                transform: rotate(90deg);
                font-size: rfs-value(14px);
                opacity: 0;
                position: relative;
                top: -6px;
                right: -2px;
                padding: 2px 4px 4px 4px;
                text-align: center;
                display: inline-block;
                margin-right: 8px;
              }
            }

            &:hover {
              span, a {
                border-color: var(--bs-primary);

                &:before {
                  opacity: 1;
                }
              }
            }

            &.active {
              span, a {
                border-color: var(--bs-primary);
                background-color: var(--bs-primary);
                color: var(--bs-body-color-inverse);
              }
            }

            &:hover {
              a {
                border-color: var(--bs-primary);
                background-color: var(--bs-primary);
                color: var(--bs-body-color-inverse);
                opacity: 1;

                &:before {
                  color: var(--bs-body-color-inverse);
                  opacity: 1;
                  border-color: var(--bs-body-color-inverse);
                }
              }
            }
          }
        }
      }
    }


    .is-vertical.is-horizontal {
      .ce--inner {
        .row.flex-row-reverse {
          .half-container {

            @include media-breakpoint-up(sm) {
              padding: 0 1rem;
            }
          }
        }
      }
    }


    .ce--inner {
      &.is-fullwidth {
        .half-container {
          margin-right: auto;
          margin-left: auto;

          @include media-breakpoint-up(md) {
            &:not(.nav-column) {
              margin-right: auto;
              margin-left: auto;
            }

            &.nav-column {
              margin-left: auto;
              margin-right: 0px;
            }
          }
        }
      }

      .row.flex-row-reverse {
        .half-container {
          @include media-breakpoint-up(md) {
            &:not(.nav-column) {
              margin-right: auto;
              margin-left: auto;
            }

            &.nav-column {
              margin-left: auto;
              margin-right: 0px;
            }
          }

          &.nav-column {
            .content-slider--nav {
              margin-left: 0px;
              @include media-breakpoint-up(md) {
                margin-right: calc(0px - (.75rem + 22px));
              }
            }
          }


        }
      }
    }

    .ce--inner {
      .swiper.content-slider {
        padding-bottom: 0px;

        .swiper-wrapper {
          text-align: left;
        }
      }
    }

  }
}