$icon-offset: 25%;

.detailed_images-group {
  .detailed_images-row {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    .detailed_images {
      display: flex;
      flex-direction: column;

      .title-paragraph {
        padding-right: calculateRem(50);
        padding-left: calculateRem(50);

        text-align: center;

        &:not(.animated) {
          visibility: hidden;
        }

        .title {
          margin-bottom: 0;
        }
      }

      .images-container {
        align-self: center;

        position: relative;

        @include breakpoint(mobile) {
          width: 100%;
        }

        &.circle-hovered {
          .icon-container {
            display: none;
          }

          .image-container {
            svg {
              image {
                opacity: 0.5;
              }
            }
          }
        }

        .icon-container {
          position: absolute;
          top: 50%;

          z-index: 2;

          &:hover {
            opacity: 0.8;
          }

          &.backward {
            @include breakpoint(mobile) {
              left: calculateRem(25);
            }

            @include breakpoint(laptop) {
              left: $icon-offset;
            }
          }

          &.forward {
            @include breakpoint(mobile) {
              right: calculateRem(25);
            }

            @include breakpoint(laptop) {
              right: $icon-offset;
            }
          }
        }

        .image-container {
          position: absolute;
          top: 0;
          left: 0;

          height: 100%;
          width: 100%;

          visibility: hidden;

          &.visible {
            visibility: visible;
          }

          svg {
            image {
              transition: opacity 0.5s ease-in-out;
            }
            g.shape-group {
              &.shape-group-1 {
                g.circle-group {
                  &.animated {
                    animation-delay: 400ms;
                  }
                }
              }

              &.shape-group-2 {
                g.circle-group {
                  &.animated {
                    animation-delay: 800ms;
                  }
                }
              }

              &.shape-group-3 {
                g.circle-group {
                  &.animated {
                    animation-delay: 1200ms;
                  }
                }
              }

              g.circle-group {
                &:hover {
                  & + line {
                    @include breakpoint(laptop) {
                      display: inline;
                    }

                    & + .text-group {
                      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                        visibility: visible;
                      }
                    }
                  }
                }

                &:not(.animated) {
                  visibility: hidden;
                }

                circle.big-circle {
                  fill: $quaternary-color;
                }

                circle.small-circle {
                  fill: $white;
                }

                circle.transparent-circle {
                  fill: transparent;
                }
              }
            }

            line {
              display: none;

              stroke-width: calculateRem(3);

              animation: dash 0.3s linear forwards;

              @keyframes dash {
                to {
                  stroke-dashoffset: 0;
                }
              }
            }

            g.text-group {
              visibility: hidden;

              animation-duration: 0.2s;

              text.label {
                font-weight: 700;
                text-transform: uppercase;
              }
            }
          }
        }
      }

      .details-container {
        @include breakpoint(mobile) {
          display: flex;
          flex-direction: column;
          justify-content: center;

          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;

          padding-top: calculateRem(50);
          padding-right: calculateRem(50);
          padding-bottom: calculateRem(50);
          padding-left: calculateRem(50);

          z-index: 123;
        }

        @include breakpoint(laptop) {
          display: none;
        }

        & > .icon-container.close {
          position: absolute;
          top: calculateRem(50);
          right: calculateRem(50);
        }

        .details {
          .label {
            font-size: 20px;
            line-height: 24px;

            font-weight: 700;
          }

        }

        .controls-container {
          display: flex;
          justify-content: flex-end;
          align-items: center;

          position: absolute;
          left: 0;
          bottom: 0;

          height: 20%;
          width: 100%;

          padding-right: calculateRem(60);

          .controls {
            display: flex;

            //position: absolute;
            //bottom: 20%;
            //left: 50%;
            //
            //&.both-showing {
            //  left: calc(50% - 18px);
            //}

            .icon-container {
              display: flex;

              &.previous {
                & + .next {
                  margin-left: calculateRem(30);
                }
              }

              i {
                font-size: calculateRem(36);
              }
            }
          }
        }
      }
    }
  }
}