// stylelint-disable selector-class-pattern, no-descending-specificity
.fancybox__container {
  &.isStyleBase {
    z-index: $z-index-fancybox-container;

    .fancybox__thumbs .carousel__slide .fancybox__thumb::after {
      border-width: 2px
    }

    .fancybox__thumb {
      padding-top: 100%;
    }

    .fancybox__thumbs .carousel__slide {
      padding: 0.5rem;
    }

    .fancybox__backdrop {
      background: rgba(#000, 0.85)
    }
  }

  &.isStyleJtails {
    z-index: $z-index-fancybox-container;

    .fancybox__thumbs .carousel__slide .fancybox__thumb::after {
      border-color: $color-primary;
      border-width: 3px;
      border-radius: 0;
    }

    .fancybox__thumb {
      padding-top: 100%;
      border-radius: 0;
    }

    .fancybox__thumbs .carousel__slide {
      padding: 0.5rem;
    }

    .fancybox__backdrop {
      background: rgba(#000, 0.85)
    }

    .carousel__button {
      &.is-prev {
        svg {
          display: none;
        }

        &::before {
          font-family: $font-fontello;
          font-size: 2rem;
          content: $fontello-arrow-left-helf;
        }
      }

      &.is-next {
        svg {
          display: none;
        }

        &::before {
          font-family: $font-fontello;
          font-size: 2rem;
          content: $fontello-arrow-right-helf;
        }
      }
    }
  }
}