.back-button{
    @apply relative inline-block
}

.back-button .tooltiptext {
    @apply invisible  bg-primary text-white rounded-md p-1 absolute z-10 bottom-full left-2/4 opacity-0;
    transform: translate(-50%, 0);
    transition: opacity 0.3s;
  }

  .back-button .tooltiptext::after {
      @apply absolute top-full left-2/4 -m-4 border-4 border-solid;
    content: "";
    border-color: #555 transparent transparent transparent;
  }

  .back-button:hover .tooltiptext {
      @apply visible opacity-100;
  }

.back-button button{
    @apply outline-none border-none text-center bg-secondary text-white  text-base rounded-md flex;
}

.back-button.btn-default button{
    @apply bg-dark
}

.back-button.btn-primary button{
    @apply bg-primary;
}

.back-button.btn-secondary button{
    @apply bg-secondary;
}

.back-button.btn-size-default button{
    @apply text-base;

}

.back-button.btn-size-small button{
    @apply text-sm;
}

.back-button.btn-size-medium button{
    @apply text-lg;
}

.back-button.btn-size-large button{
    @apply text-2xl;
}


.back-button button svg{
    @apply inline-block w-4 h-4 align-middle

}

.back-button.btn-size-default button svg{
    @apply w-4 h-4;
}

.back-button.btn-size-small button svg{
    @apply w-3 h-3;
}

.back-button.btn-size-medium button svg{
    @apply w-5 h-5;
}

.back-button.btn-size-large button svg{
    @apply w-7 h-7;
}

.color-dark .icon-view svg{
    @apply fill-dark;
}
.color-white .icon-view svg{
    @apply fill-white;
}
.color-primary .icon-view svg{
    @apply fill-primary;
}
.color-secondary .icon-view svg{
    @apply fill-secondary;
}

.back-button .rounded-default{
    @apply rounded-none
}
.back-button .rounded-small{
    @apply rounded-sm
}
.back-button .rounded-medium{
    @apply rounded-md
}
.back-button .rounded-large{
    @apply rounded-full
}