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

.padding
  margin: 11rem
  border: 1px solid red

h1
  font-size: 3.25rem
  color: vars.$textColor

.div
  width: 8rem

.name
  font-size: 1.25rem

.tabs
  width: 100%

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

  &__list
    position: relative
    display: flex

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

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

  &__indicator
    position: absolute
    background-color: hsl(200 98% 39%)
    transition: all 250ms

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

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

  &__trigger
    display: inline-block
    padding: 8px 16px
    outline: none
    cursor: pointer

  &__trigger:hover
    background-color: hsl(0 0% 98%)
    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: 100%
  border-collapse: collapse
  margin: 2rem

  th, td
    border: 1px solid vars.$tableBorderColor
    padding: 0.75rem
    text-align: left
    font-size: 1.1rem

  td:nth-child(1)
    width: 12rem

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

  th
    background-color: vars.$tableHeaderBackground
    color: white

.modal
  font-weight: 500

  &__application-number
    font-size: 1.75rem
    font-weight: 700
    display: flex
    flex-direction: column
    flex-wrap: wrap
    align-items: center

  &__name
    padding: 1rem 0 0 0
    font-size: 1rem

  &__row
    display: flex
    flex-direction: column
    flex-wrap: wrap
    justify-content: flex-start
    align-items: flex-start
    gap: 0.5rem
    padding: 2rem 0 0 0

    &__label
      font-size: 0.75rem

    &__detail
      font-size: 1rem