@layer components {
  .ui-slider-marker {
    font-size: 0.5rem;
    top: -1px;

    @apply leading-none px-1 relative;
  }

  @keyframes fillAnimation {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  .ui-icon-cta {
    @apply cursor-pointer overflow-hidden;
    @apply rounded border-2 border-mid-grey hover:border-active-orange;
    transition: all 0.4s;
  }

  @screen sm {
    .ui-icon-cta-left:hover .ui-icon-cta-holder {
      transform: translateX(-100%);
    }
    .ui-icon-cta-right .ui-icon-cta-holder {
      transform: translateX(-100%);
    }
    .ui-icon-cta-right:hover .ui-icon-cta-holder {
      transform: translateX(0%);
    }
  }

  .ui-icon-cta-holder {
    @apply w-full h-full;
    transition: all 0.4s;
  }
}