@use "../mixins" as *

.ra-content-layout
  @apply flex flex-col flex-grow p-6 overflow-auto
  @apply border-l border-wp-gray-5 dark:border-wp-gray-60

.ra-content-header
  @apply flex flex-row items-center justify-between

.ra-theme-toggle
  @apply rounded-md p-1
  @apply flex items-center justify-center size-6 min-w-6 min-h-6
  @apply bg-transparent
  @apply text-wp-gray-100 dark:text-wp-gray-5
  @apply hover:text-wp-blue-70 dark:hover:text-white
  @apply hover:bg-wp-blue-0 dark:hover:bg-wp-blue-70
  @apply transition-all duration-200 ease-in-out
  @apply cursor-pointer

  @include onFocus()

.ra-content-description
  @apply max-w-[600px]

.ra-content-settings
  @apply flex flex-col gap-6 py-6