supabase_surface

/* https://github.com/supabase/ui/blob/develop/src/components/Button/Button.module.css */

.sbui-btn-container {
  @apply inline-flex font-medium;
}

.sbui-btn {
  @apply relative cursor-pointer inline-flex items-center space-x-2 text-center border border-solid border-transparent transition ease-out duration-200 outline-none;
  @apply rounded;
  font-family: inherit;
  font-weight: inherit;
}

.sbui-btn:focus {
  @apply outline-none;
}

.sbui-btn-container--shadow {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

.sbui-btn--w-full {
  @apply w-full flex items-center justify-center;
}

.sbui-btn:disabled {
  @apply opacity-75 cursor-not-allowed;
  pointer-events: none;
}

/*
  Button sizes
*/

.sbui-btn--tiny {
  @apply px-2.5 py-1.5 text-xs;
}
.sbui-btn--small {
  @apply px-3 py-2 text-sm leading-4;
}
.sbui-btn--medium {
  @apply px-4 py-2 text-sm;
}
.sbui-btn--large {
  @apply px-4 py-2 text-base;
}
.sbui-btn--xlarge {
  @apply px-6 py-3 text-base;
}

/*
  Button varients
*/
.sbui-btn-primary {
  @apply text-white bg-brand-800 hover:bg-brand-600;
  @apply dark:hover:bg-brand-900;
}
.dark .sbui-btn-primary {
  text-shadow: 0px 0px 4px rgba(38, 111, 78, 0.5);
}

.sbui-btn-default {
  @apply text-gray-500 bg-white border-gray-200 hover:text-gray-600;
  @apply hover:bg-white hover:border-gray-200;

  @apply dark:border-gray-600 dark:bg-gray-600 dark:text-dark-200;
  @apply dark:hover:bg-gray-700;
}
.dark .sbui-btn-default {
  text-shadow: 0px 0px 4px rgba(31, 31, 31, 50%);
}

.sbui-btn-secondary {
  @apply text-gray-600 bg-gray-200;
  @apply hover:text-gray-700 hover:bg-gray-300;

  @apply dark:text-gray-300 dark:bg-gray-500;
  @apply dark:hover:bg-gray-600;
}
.dark .sbui-btn-secondary {
  text-shadow: 0px 0px 4px rgba(42, 42, 42, 50%);
}

.sbui-btn-outline {
  @apply border text-gray-500 bg-transparent border-gray-200 border-solid hover:bg-white hover:text-gray-600 hover:border-gray-600 dark:text-white dark:border-dark-400 dark:hover:text-dark-600 dark:hover:border-white;
}
.sbui-btn-dashed {
  @apply border text-gray-500 bg-transparent border-gray-200 border-dashed hover:text-gray-600 hover:border-gray-600;
  @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
}
.sbui-btn-link {
  @apply bg-transparent text-brand-800 border-none hover:bg-brand-900 hover:bg-opacity-25;
  box-shadow: none;
}
.sbui-btn-text {
  @apply text-gray-400 bg-transparent border-none hover:bg-gray-200 hover:bg-opacity-25;
  @apply dark:text-dark-300 dark:hover:bg-dark-600;
  box-shadow: none;
}

.sbui-btn--danger {
  @apply border-red-500 text-red-500;
  @apply dark:border-red-500 dark:text-red-500;
}

.dark .sbui-btn--danger {
  text-shadow: 0px 0px 4px rgba(229, 62, 62, 50%);
}

.sbui-btn-primary.sbui-btn--danger {
  @apply bg-red-500 text-white;
  @apply hover:bg-red-600 hover:border-red-600;
}
.sbui-btn-default.sbui-btn--danger,
.sbui-btn-secondary.sbui-btn--danger,
.sbui-btn-outline.sbui-btn--danger,
.sbui-btn-dashed.sbui-btn--danger,
.sbui-btn-link.sbui-btn--danger,
.sbui-btn-text.sbui-btn--danger {
  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
}
/* {
  @apply hover:bg-red-600 hover:text-white hover:border-red-600;
} */

/*
  Animation for icon
*/
.sbui-btn--anim--spin {
  @apply stroke-current;
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* transform: rotate(3deg); */
  /* transform: rotate(0.3rad);/ */
  /* transform: rotate(3grad); */
  /* transform: rotate(.03turn);  */
  transform-origin: center center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.sbui-btn-loader--center {
  position: absolute;

  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  margin: auto 0;

  width: inherit;
  height: inherit;
}

.sbui-btn--text-fade-out span {
  @apply opacity-0;
}