/* loading */
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background-image:
    linear-gradient(#FFF 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#FFF 16px, transparent 0);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left top , left bottom , right top , right bottom;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    width: 64px;
    height: 64px;
    transform: rotate(0deg)
  }
  50% {
    width: 30px;
    height: 30px;
    transform: rotate(180deg)
  }
  100% {
    width: 64px;
    height: 64px;
    transform: rotate(360deg)
  }
}

/* components */
/* Scrollbar */
@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply w-2 h-2
  }

  .scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent rounded-full
  }

  .scrollbar::-webkit-scrollbar-thumb {
    @apply bg-neutral-300 rounded-full
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-neutral-400
  }
}

/* button */
.btn {
@apply inline-block rounded-full text-sm font-medium text-center align-middle transition-colors duration-300
}
.btn-sm {
@apply px-5 py-2
}
.btn-lg {
  @apply px-4 py-2.5
}
.btn-c-primary {
  @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border  hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring
}
.btn-disable {
  @apply border border-neutral-200 bg-neutral-50 text-neutral-200
}
.btn-neutral {
  @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
}

/* button toggle */
.btn-toggle-content {
  @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500
}
.btn-toggle-item {
  @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200
}
.btn-toggle-show {
  @apply bg-primary text-neutral-10 shadow-md
}