/* 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)
  }
}

/* toggle */
/* <div class="toggle">
    <input type="checkbox"/>
    <label></label>
</div> */
.toggle {
  position: relative;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
}
.toggle label:before {
    content: '';
    border: 5px solid #bbb;
    height: 35px;
    width: 70px;
    position: relative;
    display: inline-block;
    border-radius: 46px;
    transition: 0.2s ease-in;
}
.toggle label:after {
    content: '';
    position: absolute;
    background: #555;
    width: 28px;
    height: 28px;
    left: 8px;
    top: 8px;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 5px #0002;
    transition: 0.2s ease-in;
}
.toggle input[type="checkbox"]:hover + label:after  {
    box-shadow: 0 2px 15px 0 #0002, 0 3px 8px 0 #0001;
}
.toggle input[type="checkbox"]:checked + label:before {
  border-color: #77C2BB;
}
.toggle input[type="checkbox"]:checked + label:after {
  background: #009688;
  left: 44px;
}

/* 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-primary rounded-full
  }

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

/* 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
}