@layer components {
  .btn {
    display: inline-flex;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-6xl);
    line-height: var(--leading-normal);
    padding: --spacing(12) --spacing(20);
    height: 50px;
    align-items: center;
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-transform: uppercase;
    transition-duration: 0s !important;
  }
  .btn.style-1 {
      display: inline-flex;
      font-size: var(--text-xl);
      height: auto;
      text-transform: capitalize;
      font-weight: var(--font-weight-regular);
      border-radius: calc(infinity * 40px);
      line-height: var(--leading-normal);
      padding: --spacing(5);
      align-items: center;
      position: relative;
      overflow: hidden;
      transition-duration: 0s !important;
  }
  .btn.style-2 {
    border-radius: 0;
    text-transform: unset;
  }
  .btn.style-2 .letter {
    text-transform: none;
  }
  .btn.style-3 .letter{
    text-transform: none;
  }
  .btn.style-3 { 
    font-size: var(--text-lg);
    text-transform: none;
    border-radius: 10px;
  }
  [data-theme-color="skin-2"].light .btn.style-3.btn-outline-primary:not(:hover) { 
    color: var(--color-dark) !important;
  }
  [data-theme-color="skin-2"] .btn.style-3.btn-primary { 
    color: var(--color-dark) !important;
  }
  @media screen and (max-width: 567px) {
    .btn {
      padding: --spacing(8) --spacing(14);
      height: 50px;
    }
  }

  .btn-sm {
    font-size: var(--text-sm);
    padding: --spacing(8) --spacing(15);
    height: 34px;
    border-radius: 8px;
    font-weight: var(--font-weight-medium);
  }

  .btn-md {
    padding: --spacing(11) --spacing(32);
    height: 50px;
  }

  .btn-lg {
    @apply sm:h-60 h-50;
    padding: --spacing(15) --spacing(30);
    font-size: var(--text-xl);
    text-transform: capitalize;
  }

  .btn.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
  }

  .light .btn-dark {
    --btn-hover: var(--color-white);
    background-color: var(--color-dark);
    color: var(--color-white);
  }
  .light .btn-dark.hover-light {
    --btn-hover: var(--color-bglight);
  }
  .dark .btn-dark.hover-dark {
    --btn-hover: var(--color-black);
  }
  
  .dark .btn-dark {
    --btn-hover: var(--color-dark);
    color: var(--color-dark);
    background-color: var(--color-white);
  }

  .light .btn-outline-dark {
    --btn-hover: var(--color-dark);
    border: 1px solid var(--color-dark);
    color: var(--color-dark);
  }

  .dark .btn-outline-dark {
    --btn-hover: var(--color-white);
    border: 1px solid var(--color-white);
    background-color: var(--color-dark);
    color: var(--color-white);
  }
  
  .btn-white {
    --btn-hover: var(--color-dark);
    border: 1px solid var(--color-white);
    color: var(--color-dark);
    background-color: var(--color-white);
  }

  .btn-light {
    --btn-hover: var(--color-dark);
    color: var(--color-secondary);
    background-color: var(--color-bglight)
  }
  
  .arrow-btn {
    --btn-hover: var(--color-bglight);
  }
  .arrow-btn:hover svg path.hover-fill {
    @apply !fill-dark;
  }
  .arrow-btn:hover svg path.hover-stroke {
    @apply !stroke-dark;
  }

  /* .button-flair {
    @apply absolute top-0 left-0 right-0 bottom-0 pointer-events-none scale-0;
  }

  .button-flair {
    transform: scale(0);
    transform-origin: 0 0;
  }
  .button-flair:before {
    @apply content-[''] absolute top-0 left-0 w-[200%] pointer-events-none -translate-1/2 rounded-full;
    background-color: var(--btn-hover);
    aspect-ratio: 1 / 1;
}*/
  .button-flair-wrapper {
    @apply overflow-hidden absolute;
    inset: -1px;
    border-radius: inherit;
} 

.btn-black {
        color: var(--color-white);
        background-color: var(--color-secondary);
        --btn-hover: var(--color-white);
    }
  .btn-primary {
    color: var(--button-text);
    background-color: var(--color-primary);
    --btn-hover: var(--color-secondary);
  }
  .btn-outline {
    --btn-hover: var(--color-secondary);
    color: var(--color-secondary);
    background-color: transparent;
    border: 2px solid var(--color-secondary);
  }
  .btn-outline.style-2 {
    border: 1px solid rgba(0,0,0,0.1);
    text-transform: capitalize;
    color: var(--color-secondary);
  }
  
  .btn-outline.light {
      @apply border-2 dark:border-white border-black dark:text-white text-black;
      --btn-hover: var(--color-primary);
  }
  .btn-outline.banner-btn.light {
      @apply border-2 border-white text-white;
      --btn-hover: var(--color-primary);
  }
  .btn-outline.light:hover {
      @apply border-2 border-primary;
  }

  .btn-secondary {
    color: var(--color-white);
    background-color: var(--color-secondary);
  }

  .dark .btn-white {
    --color-dark: #141414;
    color: var(--color-dark);
    background-color: var(--color-white);
  }

  .light .btn-white {
    color: var(--color-black);
    background-color: var(--color-white);
  }
  [data-theme-color="skin-3"].light .btn-white {
    color: var(--color-primary);
    background-color: var(--color-dark);
  }

  .btn-outline-primary {
    color: var(--color-primary);
    background-color: transparent;
    border: 2px solid var(--color-primary);
  }

  .btn-outline-primary:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
  }

  .btn-outline-white.btn-white {
    color: var(--color-white);
    background-color: transparent;
    border: 2px solid #fff;
  }

  .btn-outline-white {
    color: var(--color-primarydark);
    background-color: transparent;
    border: 2px solid var(--color-primarydark);
  }

  .btn-outline-light {
    color: var(--color-bodytext);
    background-color: transparent;
    border: 2px solid var(--color-bordercolor);
  }

  .btn-outline-light:hover {
    color: var(--color-dark);
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }


   .btn.btn-black.button--stroke:hover,
    .btn.btn-outline.light.button--stroke:hover{
        @apply text-secondary;
    }
    
    .btn.btn-primary.button--stroke:hover ,
    .btn.btn-outline.button--stroke:hover {
        @apply text-white;
    }
	
	.btn.btn-primary.button--stroke{
		overflow:visible;
	}
	.btn.btn-primary.button--stroke .button-flair__wrapper{
		overflow:hidden;
		position:absolute;
		inset:-1px;
		border-radius:inherit;
	}

    .button--stroke:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }
    
    .button__label {
        position: relative;
        text-align: center;
        transition: color 0.05s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    
    .button--stroke:hover .button__label {
        transition: color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .button-flair {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        transform: scale(0);
    }
    .button--stroke .button-flair {
        transform: scale(0);
        transform-origin: 0 0;
    }
    .button-flair:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 200%;
        aspect-ratio: 1/1;
        background-color: var(--btn-hover);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

  
}
.btn-hover{
    overflow: hidden;
    border-radius: 0;
  }
.btn-hover::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: var(--heading-color);
    transform-origin: bottom left;
    -webkit-transition: all 250ms linear 0s;
    -khtml-transition: all 250ms linear 0s;
    -moz-transition: all 250ms linear 0s;
    -ms-transition: all 250ms linear 0s;
    -o-transition: all 250ms linear 0s;
    transition: all 250ms linear 0s;
    -webkit-transform: scale(0);
    -khtml-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    z-index: 0;
    overflow: hidden;
  }
  /* .light .btn.btn-outline {
    border: 1px solid #191b1d1a;
  } */
  /* .dark .btn.btn-outline {
    border: 1px solid #ffffff1a;
  } */
  .btn-outline.btn-hover::before {
    background-color: #fff;
  }
  .btn-outline.btn-hover.style-2::before {
    background-color: rgb(25, 27, 29);
  }
  .btn.btn-hover:hover::before {
    -webkit-transform: scale(1);
    -khtml-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
  .dark .btn.btn-hover.style-2 .pxl-button-text {
    @apply text-secondary;
  }
  .dark .btn.btn-hover .pxl-button-text {
    @apply text-white;
}
  .btn.btn-hover:hover .pxl-button-text {
    @apply text-secondary;
}
  .btn.btn-hover.style-2:hover .pxl-button-text {
    @apply text-white;
}
  .btn.btn-hover:hover svg path {
    @apply stroke-secondary;
}
  .btn.btn-hover.style-2:hover svg path {
    @apply stroke-primary;
}
/* @media screen and (max-width: 768px) {
  .btn {
    font-size: var(--text-lg);
  }
} */

@media screen and (max-width: 567px) {
  .btn {
    font-size: var(--text-base);
  }
}

  .btn-overlay:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgb(110 255 110 / 50%);
  }
  .btn-overlay svg {    
    transition-duration: 0.5s;
  }
  .btn-overlay:hover svg {    
    transform: rotate(45deg);
  }

  .bordergradient:hover {
    background: padding-box, conic-gradient(from var(--angle), var(--primary) 1.04%, rgba(40, 40, 46, 0.25) 26.51%, rgba(59, 74, 37, 0) 43.7%, var(--primary) 73.76%, rgba(40, 40, 46, 0) 89.65%) border-box !important;
    animation: anglerotate 5s linear infinite !important;
  }
  
  .bordergradient {
    @apply bg-card relative z-1 overflow-hidden;
  }
  .bordergradient:after {
    @apply content-[''] absolute size-[calc(100%_-_1px)] bg-card rounded-lg -z-1 top-0 left-0;
  }
  @keyframes anglerotate {
    from {
      --angle: 0deg;
    }
    to {
      --angle: 360deg;
    }
  }
  @property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }
  
  
  /* biram */
  
.style-4.btn{
	text-transform: capitalize;
	overflow: hidden;
}

.style-4 .btn-black {
		@apply text-white bg-secondary duration-500 h-10;
	}
.style-4 .btn-black:hover {
		@apply text-secondary bg-primary;
	}
	
.style-4 .btn-sm {
		@apply !py-2.5 px-3.75 text-2sm;
	}
.style-4 .btn-icon {
		@apply size-10 p-0 justify-center;
	}
.style-4 .btn-hover::before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		background-color: var(--heading-color);
		transform-origin: bottom left;
		-webkit-transition: all 250ms linear 0s;
		-khtml-transition: all 250ms linear 0s;
		-moz-transition: all 250ms linear 0s;
		-ms-transition: all 250ms linear 0s;
		-o-transition: all 250ms linear 0s;
		transition: all 250ms linear 0s;
		-webkit-transform: scale(0);
		-khtml-transform: scale(0);
		-moz-transform: scale(0);
		-ms-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
		z-index: 0;
	}
.style-4 .btn-outline.btn-hover::before {
		background-color: #191B1D;
	}
.style-4 .btn-outline.primary.btn-hover::before {
		background-color: #E3FF75;
	}
.style-4 .btn.btn-hover:hover::before {
		-webkit-transform: scale(1);
		-khtml-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
.style-4.btn.button--stroke:hover{
		@apply !text-primary;
	}
.style-4.hover-primary.btn.button--stroke:hover {
		@apply !text-secondary;
	}
.style-4 .button-flair {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		transform: scale(0);
	}
.style-4 .button-flair:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		aspect-ratio: 1 / 1;
		background-color: var(--secondary);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	
.style-4 .hover-primary .button-flair:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		aspect-ratio: 1 / 1;
		background-color: var(--primary);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	
.style-4 .button--stroke:hover .button__label {
		transition: color 0.15s 
		cubic-bezier(0.645, 0.045, 0.355, 1);
	}

.style-4 .button__label {
		position: relative;
		text-align: center;
		transition: color 0.05s 
		cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	
.style-4 .button--stroke:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
	}
.style-4 .button--stroke .button-flair {
		transform: scale(0);
		transform-origin: 0 0;
	}
	
.style-5.btn {
	@apply inline-flex text-2sm font-medium rounded-md leading-normal py-10 px-20 h-52 bg-primary text-white items-center whitespace-nowrap;
}
