.messenger {
  position: fixed;
  bottom: 1.5rem;
  right: 25px;
  z-index: 2;
  background-color: $blue;
  padding: 0.75rem;
  border-radius: 50%;
  border: 1px solid white;
}

img {
  &.right {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &.left {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.divider {
  border-bottom: 1px solid $gray-100;
  &-right {
    border-right: 1px solid $gray-100;
    @include media-breakpoint-down(md) {
      border-right: none;
    }
    &.light {
      border-right: 1px solid rgba(255, 255, 255, 0.12);
      @include media-breakpoint-down(md) {
        border-right: none;
      }
    }
  }
}

.icon {
  &-circle {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $primary;
    [class^="ic-"],
    [class*=" ic-"] {
      @include rfs(10px);
      color: white;
    }

    &.white {
      background-color: white;
      [class^="ic-"],
      [class*=" ic-"] {
        color: $primary;
      }
      &:hover {
        background-color: $primary;
        [class^="ic-"],
        [class*=" ic-"] {
          color: white;
        }
      }
    }
  }
  &-xl {
    height: 64px;
    width: 64px;
    display: flex;
    border-radius: 50%;
    background-color: white;
    justify-content: center;
    align-items: center;
    .icon {
      [class^="ic-"],
      [class*=" ic-"] {
        color: $primary;
        @include rfs(32px);
      }
    }
  }
}

.media-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img,
  video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &.zoom-pinch {
    max-height: 20rem;
  }
}

//-eight point spacers
// margin
@each $label, $value in $eight-pt-spacers {
  .mbottom {
    &-#{$label} {
      margin-bottom: $value !important;
    }

    &-lg {
      &-#{$label} {
        @include media-breakpoint-up(lg) {
          margin-bottom: $value !important;
        }
      }
    }

    &-xxl {
      &-#{$label} {
        @include media-breakpoint-up(xxl) {
          margin-bottom: $value !important;
        }
      }
    }
  }
  .mtop {
    &-#{$label} {
      margin-top: $value !important;
    }

    &-lg {
      &-#{$label} {
        @include media-breakpoint-up(lg) {
          margin-top: $value !important;
        }
      }
    }

    &-xxl {
      &-#{$label} {
        @include media-breakpoint-up(xxl) {
          margin-top: $value !important;
        }
      }
    }
  }
}

// margin/padding-top-bottom
@each $label, $value in $eight-pt-spacers {
  .myaxis-#{$label} {
    margin-top: $value !important;
    margin-bottom: $value !important;
  }
  .pyaxis-#{$label} {
    padding-top: $value !important;
    padding-bottom: $value !important;
  }
}

// padding
@each $label, $value in $eight-pt-spacers {
  .pbottom {
    &-#{$label} {
      padding-bottom: $value !important;
    }

    &-lg {
      &-#{$label} {
        @include media-breakpoint-up(lg) {
          padding-bottom: $value !important;
        }
      }
    }
  }
  .ptop {
    &-#{$label} {
      padding-top: $value !important;
    }

    &-lg {
      &-#{$label} {
        @include media-breakpoint-up(lg) {
          padding-top: $value !important;
        }
      }
    }

    &-xxl {
      &-#{$label} {
        @include media-breakpoint-up(xxl) {
          padding-top: $value !important;
        }
      }
    }
  }
}

.svg {
  &-box {
    position: absolute;
    bottom: -2rem;

    @include media-breakpoint-down(md) {
      display: none;
    }
    &.left {
      left: 0;
    }
    &.right {
      right: 0;
    }
    &.lg {
      width: 800px;
    }
    &.md {
      width: 600px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}