.btn {
    @apply  px-4 py-2 text-center text-sm rounded-md outline-none border-0;
}
.btn .icon-view{
    @apply m-1 align-middle;
}
.btn .icon-view svg{
    @apply  w-4 h-4 align-top;
}
.btn.btn-rounded{
    @apply rounded-full;
}
.btn.btn-fullwidth{
    @apply w-full;
}
.btn.btn-fill{
    @apply outline-none border-0;
}
.btn.btn-outline{
    @apply border-2  border-solid ;
}

/* Button Varient */
.btn.btn-fill.btn-bg-default {
    @apply bg-borderColors text-dark;
}
.btn.btn-outline.btn-bg-default {
    @apply  border-b-borderColors text-dark;
}
.btn.btn-fill.btn-bg-primary {
    @apply bg-primary text-white;
}
.btn.btn-fill.btn-bg-secondary {
    @apply bg-secondary text-white;
}
.btn.btn-outline.btn-bg-primary {
    @apply  border-primary text-primary;
}
.btn.btn-outline.btn-bg-secondary {
    @apply border-secondary  text-secondary;
}
.btn.btn.btn-fill.btn-bg-primary .icon-view svg, .btn.btn.btn-fill.btn-bg-secondary .icon-view svg{
    @apply  fill-white;
}
.btn.btn.btn-outline.btn-bg-primary .icon-view svg{
    @apply  fill-primary;
}
.btn.btn.btn-outline.btn-bg-secondary .icon-view svg{
    @apply  fill-secondary;
}
.btn.btn.btn-outline.btn-bg-default .icon-view svg, .btn.btn.btn-fill.btn-bg-default .icon-view svg{
    @apply  fill-dark;
}

/* Button Size */
.btn.btn-size-default {
    @apply px-6 py-3 text-center text-sm;
}
.btn.btn-size-default .icon-view svg {
    @apply w-4 h-4;
}
.btn.btn-size-small {
    @apply px-5 py-2 text-center text-xs;
}
.btn.btn-size-small .icon-view svg {
    @apply w-3.5 h-3.5;
}
.btn.btn-size-medium{
    @apply px-7 py-3 text-center text-lg;
}
.btn.btn-size-medium .icon-view svg {
    @apply w-6 h-6;
}
.btn.btn-size-large{
    @apply px-10 py-5 text-center text-xl;
}
.btn.btn-size-large .icon-view svg {
    @apply w-8 h-8;
}
button.btn:disabled, button.btn[disabled] {
    @apply cursor-not-allowed opacity-70;
}