@use '/src/styles/variables.sass' as vars
@use 'sass:color'

.fullscreen
  position: absolute
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  object-fit: cover
  z-index: -1
  opacity: 1

.tabs
  width: 100%

  &[data-orientation="vertical"]
    display: flex

  &__list
    position: relative
    display: flex
    gap: 5rem

  &__list[data-orientation="horizontal"]
    align-items: center

  &__list[data-orientation="vertical"]
    flex-direction: column
    align-items: stretch

  &__indicator
    position: absolute
    background-color: color.adjust(vars.$background, $lightness: 20%)
    transition: all 250ms

  &__indicator[data-orientation="horizontal"]
    bottom: -1px
    height: 3px

  &__indicator[data-orientation="vertical"]
    right: -1px
    width: 2px

  &__trigger
    // display: inline-block
    // padding: 8px 16px
    // outline: none
    // cursor: pointer
    background-color: transparent
    border: none
    border-radius: 6px 6px 0 0
    color: vars.$textColor
    padding: 0.75rem 1.75rem
    width: 10rem
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 1rem
    font-weight: 500
    cursor: pointer
    // transition: all 0.2s ease-out

  &__trigger:hover
    background-color: color.adjust(vars.$background, $lightness: 20%)
    // color: hsl(240 5% 34%)

  &__trigger:focus-visible
    // background-color: hsl(240 5% 96%)

.tabs__trigger[data-disabled],
.tabs__trigger[data-disabled]:hover
  opacity: 0.5
  background-color: transparent

.tabs__content
  padding: 16px

.table
  width: 80%
  border-collapse: collapse
  margin: 2rem
  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e

  th, td
    padding: 0.75rem
    text-align: left
    font-size: 1rem

  th
    background-color: vars.$tableHeaderBackground
    color: vars.$textColor
    padding: 1rem

  th:nth-child(1)
    text-align: center
    border-radius: 1rem 0 0 0

  th:nth-child(3)
    border-radius: 0 1rem 0 0

  td
    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)

  td:nth-child(1)
    width: 10rem
    text-align: center

  td:nth-child(3)
    width: 8.75rem

  tbody tr:nth-child(even) 
    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)