$material-symbols-font-path: '~material-symbols/'

@use "sb-fonts"
@use "sb-colors"
@use "sb-prime"

:root
  --font-family: 'Figtree', Roboto, sans-serif
  --rt-transition-show-delay: 0.1s !important
  --rt-transition-closing-delay: 0.1s !important
  --rt-opacity: 1 !important

html
  height: 100%
  background-color: var(--primary-color)

body
  font-family: 'Figtree', Roboto, sans-serif
  margin: 0
  height: 100%
  overflow: hidden

.height-100
  height: 100%

.width-100
  width: 100%

.sb-corner-tab
  background-color: transparent
  backdrop-filter: brightness(1.4)

.sb-card
  border-radius: 6px
  border: 2px solid var(--primary-color-border)

.sb-table
  border-collapse: collapse
  font-size: 14px
  table-layout: auto
  width: 100%

  thead
    font-weight: 700
    background-color: var(--primary-color)

    td
      padding: 16px

  tbody
    tr
      vertical-align: baseline

      &:nth-child(even)
        background-color: var(--overlay-color-darker)

  td
    font-size: 16px
    padding: 8px 16px

    &:has(input), &:has(.sb-dropdown-hidden)
      padding: 8px 4px

    &:has(.p-checkbox)
      padding: 8px 16px

/*
 * The webkit-scrollbar rules are not standardized and don't work in browsers such as Firefox.
 * Therefore we keep it simple here and just give the scrollbar a little overhaul.
 */
::-webkit-scrollbar
  width: 6px
  height: 6px

::-webkit-scrollbar-thumb
  background-color: var(--primary-color-border)
  border-radius: 8px
  background-clip: padding-box

.sb-animated-overlay
  opacity: 0
  pointer-events: none
  transition: opacity ease-in 0.14s

  &.visible
    opacity: 1
    animation: 0.14s ease-in appear
    pointer-events: auto

label
  user-select: none

// Styles to match material symbols with prime icons
.material-symbols-outlined
  font-size: 1.35rem
  user-select: none

@keyframes appear
  0%
    opacity: 0
  100%
    opacity: 1

.react-tooltip
  background-color: var(--primary-color) !important
  padding: 10px !important
  z-index: 1200

.sb-edit-dialog
  width: 400px
