@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
    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: vars.$background
    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: 90%
  border-collapse: collapse
  margin: 2rem
  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e

  th, td
    // border: 1px solid vars.$tableBorderColor
    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)

.modal
  font-weight: 500

  &__application-number
    padding: 1rem 0
    border-radius: 8px
    font-size: 1.75rem
    font-weight: 800
    display: flex
    flex-direction: column
    flex-wrap: wrap
    align-items: center
    background: #16212C
    box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d

  &__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: 1.25rem 1rem
    // box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
    // border: 1px solid white
    // border-radius: 8px
    // margin: 0.5rem

    &__label
      font-size: 0.75rem

    &__detail
      font-size: 1rem

      &__price
        font-size: 1.75rem
        font-weight: 700

  &__cancel
    font-size: 0.75rem
    padding: 0.5rem 0 0 0
    font-weight: 400

.approval
  font-size: 1.75rem
  font-weight: 700
  padding: 0.5rem 1rem