/**
 * Selection Lite
 * Carefully selected Elementor addons bundle, for building the most awesome websites
 *
 * @encoding        UTF-8
 * @version         1.16
 * @copyright       (C) 2018 - 2023 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         GPLv3
 * @contributors    merkulove, vladcherviakov, phoenixmkua, podolianochka, viktorialev01
 * @support         help@merkulov.design
 **/

// ticker container
.mdp-crawler-elementor-ticker
  position: relative
  display: flex
  flex-flow: row nowrap
  overflow: hidden

.mdp-crawler-elementor-ticker-label-align-right
  flex-flow: row-reverse nowrap

  .mdp-crawler-elementor-arrows-align-left
    order: 1

  .mdp-crawler-elementor-arrows-align-right
    order: -1

.mdp-crawler-elementor-ticker-hover-pause
  &:hover
    .mdp-crawler-elementor-ticker-content
      animation-play-state: paused


// ticker label
.mdp-crawler-elementor-ticker-label
  display: flex
  flex: 0 0 auto
  z-index: 999
  align-items: center
  background: #0a4b78

[data-elementor-device-mode="mobile"] .mdp-crawler-elementor-label-hide-mobile,
[data-elementor-device-mode="mobile_extra"] .mdp-crawler-elementor-label-hide-mobile
  display: none

.mdp-crawler-elementor-ticker-label-text-wrapper
  display: flex

// label icon position
.mdp-crawler-elementor-ticker-label-icon-position-above-left,
.mdp-crawler-elementor-ticker-label-icon-position-above-center,
.mdp-crawler-elementor-ticker-label-icon-position-above-right
  flex-direction: column

.mdp-crawler-elementor-ticker-label-icon-position-under-left,
.mdp-crawler-elementor-ticker-label-icon-position-under-center,
.mdp-crawler-elementor-ticker-label-icon-position-under-right
  flex-direction: column-reverse

.mdp-crawler-elementor-ticker-label-icon-position-after
  flex-direction: row-reverse

.mdp-crawler-elementor-ticker-label-icon-position-above-left

  .mdp-crawler-elementor-ticker-label-icon
    align-self: flex-start

.mdp-crawler-elementor-ticker-label-icon-position-above-center

  .mdp-crawler-elementor-ticker-label-icon
    align-self: center

.mdp-crawler-elementor-ticker-label-icon-position-above-right

  .mdp-crawler-elementor-ticker-label-icon
    align-self: flex-end

.mdp-crawler-elementor-ticker-label-icon-position-under-left

  .mdp-crawler-elementor-ticker-label-icon
    align-self: flex-start

.mdp-crawler-elementor-ticker-label-icon-position-under-center

  .mdp-crawler-elementor-ticker-label-icon
    align-self: center

.mdp-crawler-elementor-ticker-label-icon-position-under-right

  .mdp-crawler-elementor-ticker-label-icon
    align-self: flex-end

// ticker content
.mdp-crawler-elementor-ticker-content
  display: flex
  flex-direction: row
  align-items: center
  height: 100%

.mdp-crawler-elementor-content-wrapper
  position: relative
  flex: 1 1 auto
  overflow: hidden

.mdp-crawler-elementor-ticker-ticker-type

  .mdp-crawler-elementor-ticker-animation-reverse
    animation-direction: reverse !important
    flex-direction: row-reverse

  .mdp-crawler-elementor-ticker-content
    animation: ticker infinite linear normal forwards

  .mdp-crawler-elementor-ticker-item
    white-space: nowrap

  .mdp-crawler-elementor-content-wrapper
    flex: unset
    overflow: unset

.mdp-crawler-elementor-ticker-item
  display: flex
  align-items: center

.mdp-crawler-elementor-ticker-item-active
  display: block !important

// separator
.mdp-crawler-elementor-ticker-item-separator
  display: block
  white-space: nowrap

// ticker slider
.mdp-crawler-elementor-ticker-slider
  justify-content: flex-start
  position: relative

  .mdp-crawler-elementor-slider-slide
    flex-shrink: 0
    width: 100%
    flex-basis: 0
    padding: 0 10px

// slider arrows
.mdp-crawler-elementor-arrows
  display: flex
  z-index: 999
  align-items: center

.mdp-crawler-elementor-arrow
  cursor: pointer
  display: flex
.mdp-crawler-elementor-previous-arrow
  justify-content: flex-end

.mdp-crawler-elementor-next-arrow
  justify-content: flex-start

.mdp-crawler-elementor-arrows-align-left
  order: -1

// animations
@keyframes ticker
  0%
    transform: translate(var(--ticker-track-width), 0)
  100%
    transform: translate(-100%, 0)

@keyframes fade_in_show
  0%
    opacity: 0

  100%
    opacity: 1