.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

.no-border {
  border: 0 !important;
}

.no-border-radius {
  border-radius: 0 !important;
}

.no-box-shadow {
  box-shadow: none !important;
}

.no-outline {
  outline: 0 !important;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

  &-2-lines,
  &-3-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  &-2-lines {
    -webkit-line-clamp: 2;
  }

  &-3-lines {
    -webkit-line-clamp: 3;
  }
}

.readonly {
  cursor: default !important;
}

.disabled,
[disabled] {
  &,
  * {
    outline: 0 !important;
    cursor: not-allowed !important;
  }
}

.disabled,
[disabled] {
  opacity: 0.6 !important;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.transparent {
  background: transparent !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-hidden-y {
  overflow-y: hidden !important;
}

.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}

.dimmed,
.light-dimmed {
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0 #{'/* rtl:ignore */'};
    bottom: 0;
    left: 0 #{'/* rtl:ignore */'};
  }
}

.dimmed:after {
  background: $dimmed-background !important;
}

.light-dimmed:after {
  background: $light-dimmed-background !important;
}

.z-top {
  z-index: $z-side !important;
}

.z-max {
  z-index: $z-max !important;
}

$platforms: desktop, mobile, native-mobile, cordova, capacitor, electron, touch, within-iframe, platform-ios, platform-android;

@each $type in $platforms {
  body:not(.#{$type}) .#{$type}-only,
  body.#{$type} .#{$type}-hide {
    display: none !important;
  }
}

@media all and (orientation: portrait) {
  .orientation-landscape {
    display: none !important;
  }
}

@media all and (orientation: landscape) {
  .orientation-portrait {
    display: none !important;
  }
}

@media screen {
  .print-only {
    display: none !important;
  }
}

@media print {
  .print-hide {
    display: none !important;
  }
}

@media (max-width: $breakpoint-xs-max) {
  .xs-hide,
  .gt-xs,
  .sm,
  .gt-sm,
  .md,
  .gt-md,
  .lg,
  .gt-lg,
  .xl {
    display: none !important;
  }
}

@media (min-width: $breakpoint-sm-min) and (max-width: $breakpoint-sm-max) {
  .sm-hide,
  .xs,
  .lt-sm,
  .gt-sm,
  .md,
  .gt-md,
  .lg,
  .gt-lg,
  .xl {
    display: none !important;
  }
}

@media (min-width: $breakpoint-md-min) and (max-width: $breakpoint-md-max) {
  .md-hide,
  .xs,
  .lt-sm,
  .sm,
  .lt-md,
  .gt-md,
  .lg,
  .gt-lg,
  .xl {
    display: none !important;
  }
}

@media (min-width: $breakpoint-lg-min) and (max-width: $breakpoint-lg-max) {
  .lg-hide,
  .xs,
  .lt-sm,
  .sm,
  .lt-md,
  .md,
  .lt-lg,
  .gt-lg,
  .xl {
    display: none !important;
  }
}

@media (min-width: $breakpoint-xl-min) {
  .xl-hide,
  .xs,
  .lt-sm,
  .sm,
  .lt-md,
  .md,
  .lt-lg,
  .lg,
  .lt-xl {
    display: none !important;
  }
}

.vc-focus-helper {
  outline: 0;
}

body {
  .vc-focus-helper {
    position: absolute;
    top: 0;
    left: 0 #{'/* rtl:ignore */'};
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);

    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0 #{'/* rtl:ignore */'};
      width: 100%;
      height: 100%;
      opacity: 0;
      border-radius: inherit;
      transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
    }

    &:before {
      background: #000;
    }

    &:after {
      background: #fff;
    }

    &--rounded {
      border-radius: $generic-border-radius;
    }

    &--round {
      border-radius: 50%;
    }
  }

  .vc-focusable,
  .vc-manual-focusable,
  .vc-hoverable {
    outline: 0;
  }

  .vc-focusable:focus,
  .vc-manual-focusable--focused,
  .vc-hoverable:hover {
    > .vc-focus-helper {
      background: currentColor;
      opacity: 0.15;

      &:before {
        opacity: 0.1;
      }

      &:after {
        opacity: 0.4;
      }
    }
  }

  .vc-focusable:focus,
  .vc-manual-focusable--focused {
    > .vc-focus-helper {
      opacity: 0.22;
    }
  }
}