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

.sbui-divider {
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.sbui-divider-vertical {
  @apply bg-gray-200 dark:bg-dark-500;
  width: 1px;
  height: inherit;
}

.sbui-divider-vertical.sbui-divider--light {
  @apply bg-gray-100 dark:bg-dark-600;
}

.sbui-divider--no-text {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.sbui-divider > span {
  @apply text-sm;
  @apply text-gray-300;
  @apply dark:text-dark-400;
  display: inline-block;
  padding: 0 1em;
}

.sbui-divider--left:before {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  top: 50%;
  content: "";
  position: relative;
  display: inline-block;
  width: 5%;
}

.sbui-divider--left:after {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  top: 50%;
  content: "";
  position: relative;
  display: inline-block;
  width: 95%;
}

.sbui-divider--right:before {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  top: 50%;
  content: "";
  position: relative;
  display: inline-block;
  width: 95%;
}

.sbui-divider--right:after {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  top: 50%;
  content: "";
  position: relative;
  display: inline-block;
  width: 5%;
}

.sbui-divider--center:before,
.sbui-divider--center:after {
  @apply border-gray-200 dark:border-dark-500;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  top: 50%;
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
}

.sbui-divider--light.sbui-divider--left:before,
.sbui-divider--light.sbui-divider--left:after,
.sbui-divider--light.sbui-divider--right:before,
.sbui-divider--light.sbui-divider--right:after,
.sbui-divider--light.sbui-divider--center:before,
.sbui-divider--light.sbui-divider--center:after,
.sbui-divider--light.sbui-divider--no-text {
  @apply border-gray-100 dark:border-dark-600;
}

.sbui-divider--light.sbui-divider > span {
  @apply text-gray-200;
  @apply dark:text-dark-800;
}