@layer components {
  .btn-link {
    @apply text-[rgba(var(--theme-default),1)];
  }
  .btn-outline-light {
    @apply !text-[rgba(var(--theme-font-color),1)];
  }
  .purchase-btn {
    @apply min-w-[200px] transition-[0.5s] inline-block px-5 py-3 border-[none] hover:transition-[0.5s];
    background: linear-gradient(90deg, rgba(var(--theme-default), 1) -18.33%, #563ee0 62.78%);
    &:hover {
      background: linear-gradient(90deg, #563ee0 -18.33%, rgba(var(--theme-default), 1) 62.78%);
    }
  }
  .btn-light {
    &:not([disabled]):not(.disabled).active.active {
      @apply text-[rgba(var(--theme-body-font-color),1)] bg-[rgba(var(--light-color),2%)];
    }
  }
  .btn-primary-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--theme-default), 1) 0%, #988fff 51%, rgba(var(--theme-default), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #988fff, 0%, rgba(var(--theme-default), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-secondary-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--theme-secondary), 1) 0%, #5b5b5b 51%, rgba(var(--theme-secondary), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #5b5b5b, 0%, rgba(var(--theme-secondary), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-success-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--success-color), 1) 0%, #3aa130 51%, rgba(var(--success-color), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #3aa130, 0%, rgba(var(--success-color), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-info-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--info-color), 1) 0%, #149add 51%, rgba(var(--info-color), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #149add, 0%, rgba(var(--info-color), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-warning-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--warning-color), 1) 0%, #ea9d02 51%, rgba(var(--warning-color), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #ea9d02, 0%, rgba(var(--warning-color), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-danger-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--danger-color), 1) 0%, #fd7b72 51%, rgba(var(--danger-color), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #fd7b72, 0%, rgba(var(--danger-color), 1), 100%, rgba(var(--white), 1));
    }
  }
  .btn-light-gradien {
    @apply text-[rgba(var(--white),1)] transition-all duration-[0.3s] ease-[ease] border-[none];
    background-image: linear-gradient(to right, rgba(var(--light-color), 1) 0%, #e0e0e0 51%, rgba(var(--light-color), 1) 100%);
    background-size: auto 200%;
    &:focus,
    &:active,
    &.active {
      @apply transition-[1.5s];
      background-position: right center;
      background-image: linear-gradient(to right, #e0e0e0, 0%, rgba(var(--light-color), 1), 100%, rgba(var(--white), 1));
    }
  }
  [class*="-gradien"]:hover {
    @apply transition-all duration-[0.3s] ease-[ease] text-[rgba(var(--white),1)];
    background-size: 50% 100%;
  }
  [class*="-gradien"]:hover {
    @apply bg-[50%_100%] transition-all duration-[0.3s] ease-[ease] text-[rgba(var(--white),1)];
  }
  .btn {
    @apply px-[28px] py-[6px] text-xs text-center;
    &-primary {
      @apply bg-[rgba(var(--theme-default),1)];
    }
    &-secondary {
      @apply bg-[rgba(var(--theme-secondary),1)];
    }
    &-info {
      @apply bg-[rgba(var(--info-color),1)];
    }
    &-success {
      @apply bg-[rgba(var(--success-color),1)];
    }
    &-warning {
      @apply bg-[rgba(var(--warning-color),1)];
    }
    &-danger {
      @apply bg-[rgba(var(--danger-color),1)];
    }
    &-light {
      @apply bg-[rgba(var(--light-color),1)];
    }
    &.bg-light-primary {
      &:hover {
        @apply text-[rgba(var(--white),1)] !bg-[rgba(var(--theme-default),1)];
      }
    }
  }
  .btn-lg {
    @apply !text-[18px] rounded-lg;
  }
  .btn-sm {
    @apply !text-[12px];
  }
  .btn-xs {
    @apply !px-[6.4px] !py-[0.8px] !leading-[1.4];
    font-size: var(--btn-xs-font-size) !important;
  }
  .large-btn {
    @apply -mb-5;
    .btn {
      @apply mr-[5px] mb-[15px];
    }
  }
  .btn-outline-white {
    @apply border text-[rgba(var(--white),1)] border-solid border-[rgba(var(--white),1)];
    &:hover,
    &:focus {
      @apply text-[rgba(var(--theme-default),1)] bg-[rgba(var(--white),1)];
    }
  }
  .btn-warning {
    @apply text-[rgba(var(--white),1)];
    &:hover,
    &.disabled {
      @apply text-[rgba(var(--white),1)];
    }
  }
  [class*="-gradien"] {
    &:hover {
      @apply !bg-[50%_100%] !transition-all duration-[0.3s] ease-[ease] text-[rgba(var(--white),1)];
    }
  }
  .btn-square {
    @apply !rounded-[0];
  }
  .btn-pill {
    @apply !rounded-[60px];
  }
  .btn-group-pill {
    .btn {
      &:first-child {
        @apply rounded-[60px];
      }
      &:last-child {
        @apply rounded-[60px];
      }
    }
  }
  .btn-group-square {
    .btn {
      &:first-child {
        @apply rounded-[0];
      }
      &:last-child {
        @apply rounded-[0];
      }
    }
  }
  .btn-showcase {
    @apply -mb-2.5;
    .btn {
      @apply mr-2.5 mb-2.5;
    }
  }
  .dropdown {
    .dropdown-toggle {
      &:after {
        @apply text-sm;
      }
    }
    .dropdown-menu {
      @apply min-w-[160px] whitespace-nowrap bg-[rgba(var(--white),1)] shadow-[0px_2px_8px_0px_rgba(var(--black),0.2)] rounded-md;
      &.show {
        @apply !right-0 !top-[105%] !bottom-[unset];
      }
    }
  }
  .btn-dropdown-showcase {
    @apply -mb-2.5;
    .dropdown {
      @apply mr-[18px] mb-2.5;
    }
    .btn-group {
      @apply mr-[18px] mb-2.5;
    }
  }
  .btn-group {
    @apply relative inline-flex align-middle;
    .radio {
      label {
        &::before {
          @apply top-0.5;
        }
        &::after {
          @apply top-[7px];
        }
      }
    }
    .checkbox {
      label {
        @apply mt-[3px];
      }
    }
  }
  .tooltiptext {
    @apply visible w-[120px] bg-[#555] text-[rgba(var(--white),1)] text-center absolute z-[1] ml-[-50px] opacity-100 transition-opacity duration-[0.3s] px-0 py-[5px] rounded-md left-2/4 bottom-[125%] after:content-[""] after:absolute after:ml-[-5px] after:border-[5px] after:border-solid after:border-[#555_transparent_transparent_transparent] after:left-2/4 after:top-full;
  }
  .card-header-right-icon {
    .btn.btn-light-primary {
      @apply bg-[rgba(var(--light-shade-primary),1)] text-[rgba(var(--theme-default),1)] hover:text-[rgba(var(--white),1)] hover:bg-[rgba(var(--theme-default),1)];
    }
  }
  .btn,
  button {
    &.button-primary {
      @apply bg-[rgba(var(--light-shade-primary),1)] text-[rgba(var(--theme-default),1)] !tracking-[1px];
      &:hover {
        @apply bg-[rgba(var(--theme-default),1)] text-[rgba(var(--white),1)] border-[rgba(var(--theme-default),1)];
      }
    }
  }
  .visual-button {
    button,
    .btn {
      @apply p-[0] w-[45px] h-[45px];
      svg {
        @apply align-middle w-[18px] h-[18px];
      }
      &.btn-pill {
        @apply rounded-[50%] w-[45px] h-[45px];
      }
    }
    &.visual-button1 {
      .btn,
      .btn-pill {
        @apply gap-2 px-7 py-1.5 w-[auto] h-[auto] flex justify-center items-center;
      }
      .btn-pill {
        @apply rounded-[60px];
      }
    }
  }
  .button-wrapper {
    @apply flex items-start gap-3 flex-col;
    .btn-group {
      .btn {
        @apply align-middle;
        svg {
          @apply w-[18px] h-[18px];
        }
      }
      &.select-checkbox {
        label {
          &:nth-child(4) {
            @apply border-l-0;
          }
        }
      }
    }
    &.button-outlined {
      .btn-group {
        .btn {
          @apply !leading-[0.8];
        }
      }
    }
    .dropdown {
      .dropdown-menu {
        &.show {
          @apply !left-[0];
        }
      }
    }
  }
  .btn-group-vertical {
    .btn-group {
      .btn {
        &.show {
          @apply border-[rgba(var(--recent-border),1)];
        }
      }
    }
  }
  .btn-radio {
    .btn-group {
      .btn {
        &:hover {
          @apply text-[rgba(var(--body-font-color),1)];
        }
      }
    }
  }
  .btn-toolbar {
    @apply gap-3;
  }
  .card-wrapper {
    .btn-option {
      .btn {
        &:hover {
          @apply text-[rgba(var(--body-font-color),1)];
        }
        &:focus,
        &:active {
          @apply text-[rgba(var(--body-font-color),1)] shadow-[unset];
        }
      }
    }
  }
  .loader-buttons {
    button {
      i {
        @apply ml-2;
      }
    }
  }
  .ripple-button {
    @apply overflow-hidden relative origin-[center_center];
    &:focus,
    &:active {
      @apply shadow-none outline-[0];
    }
    .ripple-span {
      @apply bg-[rgba(255,255,255,0.7)] absolute animate-[ripple_0.7s_linear] w-5 h-5 rounded-[50%] scale-0;
    }
  }
  .mix-hover-btn {
    .btn {
      @apply relative;
      &.btn-border-pop {
        &::before {
          @apply content-[""] absolute border-[rgba(var(--theme-default),1)] transition-[top,left,right,bottom,100ms] duration-[ease-in-out] border-2 border-solid inset-0;
        }
        &:hover,
        &:focus {
          &::before {
            @apply top-[-5px] left-[-5px] right-[-5px] bottom-[-5px] rounded-[10px];
          }
        }
      }
      &.btn-bg-slide {
        &::before {
          @apply content-[""] absolute z-[-1] bg-[rgba(var(--theme-default),1)] transition-transform duration-300 ease-[ease-in-out] origin-left rounded-md scale-x-0 inset-0;
        }
        &:hover,
        &:focus {
          @apply !text-[rgba(var(--white),1)] transition-[color] duration-300 ease-[ease-in-out] z-[1];
          &::before {
            @apply scale-[1];
          }
        }
      }
      &.btn-border-bottom {
        &::before {
          @apply content-[""] absolute h-0.5 bg-[rgba(var(--theme-default),1)] transition-transform duration-300 ease-[ease-in-out] scale-x-0 bottom-0 inset-x-0;
        }
        &:hover,
        &:focus {
          &::before {
            @apply scale-x-100;
          }
        }
      }
    }
  }
  .button--winona {
    @apply relative overflow-hidden transition-[border-color] duration-[0.3s,background-color] delay-[0.3s] ease-[cubic-bezier(0.2,1,0.3,1)] border-[rgba(var(--theme-default),1)] bg-transparent text-[rgba(var(--body-font-color),1)] p-0 border-2 border-solid hover:bg-[rgba(var(--light-primary),0.7)] hover:after:opacity-100;
    -webkit-transition: border-color 0.3s, background-color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    &::after {
      @apply content-[attr(data-text)] absolute w-full h-full opacity-0 text-[#7366FF] left-0 top-0;
      -webkit-transform: translate3d(0, 25%, 0);
      transform: translate3d(0, 25%, 0);
    }
    > span {
      @apply !block py-[6px] px-[28px];
    }
    &:hover {
      &::after {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
      > span {
        @apply opacity-0;
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
      }
    }
  }
  @keyframes ripple {
    from {
      transform: scale(1);
      opacity: 0.4;
    }

    to {
      transform: scale(30);
      opacity: 0;
    }
  }
  @screen sm {
    .purchase-btn {
      @apply text-sm;
    }
  }
}