@import '../../../styles/utilities';
.navigationWrapper {
  @apply relative;
  min-height: theme('caroucel.arrow-height');
  .isPadding {
    @apply spacing-horizontal;
  }
  :global(.customArrow) {
    width: 64px;
    height: 64px;
    &:focus {
      outline: none;
    }
    @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
    &:global(.leftArrow) {
      @apply left-0;
    }
    &:global(.rightArrow) {
      @apply right-0;
    }
    &:global(.isDisabledArrow) {
      @apply hidden;
    }
  }
	:global {
		.dots {
			display: flex;
			padding: 1rem 0;
			justify-content: center;
		}
	
		.dot {
			border: none;
			width: 1rem;
			height: 1rem;
			background: #c5c5c5;
			border-radius: 50%;
			margin: 0 0.5rem;
			padding: 0.5rem;
			cursor: pointer;
		}
	
		.dot:focus {
			outline: none;
		}
	
		.dot.active {
			background: #000;
		}
	}
}