.btn {
  @apply relative py-3 px-5 rounded text-sm font-medium uppercase bg-blue text-white tracking-wide whitespace-no-wrap;
  border-radius: 30px;
  min-width: 200px;
  max-width: 400px;
}

.btn--capitalize {
  @apply capitalize;
}

.btn--no-capitalize {
  @apply normal-case;
}

.btn--large {
  @apply py-4 px-6 font-semibold;
}

.btn--with-icon--only.btn--large {
  @apply p-4;
}

.btn--secondary {
  @apply bg-white text-blue shadow-md py-3 font-semibold tracking-normal;
}

.btn--small {
  @apply text-xs py-2 px-4;
}

.btn--secondary .icon {
  @apply text-blue;
}

.btn--faded {
  background: rgba(0, 0, 0, 0.7);
}

.btn--faded .btn__subtext {
  opacity: .5;
}

.btn--light {
  @apply text-manatee border border-grey-light font-bold;
  background: white;
}

.btn--absolute {
  @apply absolute;
}

.btn--center {
  left: 50%;
  transform: translateX(-50%);
}

.btn--with-icon {
  @apply inline-flex;
}

.btn--with-icon .btn__icon {
  @apply m-0 mr-3;
}

.btn--with-icon-right .btn__icon {
  @apply m-0 ml-3;
}

.btn--with-icon-top .btn__main-wrapper {
  @apply flex-col;
}

.btn--with-icon-top .btn__main-wrapper .btn__icon {
  @apply absolute;
  top: -50%;
  transform: translateY(50%);
}

.btn--with-icon-top.btn--no-subtext .btn__main-wrapper .btn__icon {
  @apply -mt-2;
}

.btn--with-icon-inline .btn__text {
  @apply flex justify-center items-center;
  font-weight: 600;
}

.btn--with-icon-inline .btn__icon {
  @apply mr-2;
}

.btn--with-icon-inline .btn__icon .disk {
  @apply p-0;
  height: 15px;
  width: 15px;
}

.btn--with-icon--only .btn__icon {
  @apply mr-0;
}

.btn__main-wrapper {
  @apply flex items-center justify-center w-full;
}

.btn--align-left .btn__main-wrapper {
  @apply justify-start;
}

.btn--align-center .btn__main-wrapper {
  @apply justify-center;
}

.btn--align-center .btn__main-wrapper .btn__text-wrapper {
  @apply text-center;
}

.btn__text-wrapper {
  @apply truncate text-right;
}

.btn--with-icon:not(.btn--with-icon-right):not(.btn--align-center) .btn__text-wrapper {
  @apply text-left;
}

.btn:not(.btn--faded).btn--with-icon .btn__text {
  @apply text-black;
}

.btn__text {
  @apply truncate;
}

.btn__subtext {
  @apply text-xs font-normal block;
}

.btn__subtext:not(.btn__subtext--top) {
  @apply mt-1;
}

.btn__subtext.btn__subtext--top {
  @apply mb-1;
}

.btn--secondary .btn__subtext {
  @apply text-grey;
}

.btn--light .btn__subtext {
  @apply text-grey;
}

.btn--capitalize .btn__subtext {
  @apply lowercase;
}

.btn--with-icon svg {
  filter: none;
}

/**
 * Loading
 */

.btn--with-loader {
  @apply p-3;
  min-width: unset;
}

.btn .btn__loading .loading__spinner {
  @apply text-white;
  border-color: unset;
  border-right-color: transparent;
  height: 25px;
  width: 25px;
  border-width: 2px;
}

.btn--secondary .btn__loading {}