.sb-terminal-dialog
  width: min(1200px, 70vw)

  .sb-dialog-content
    background: var(--primary-color) !important

  .xterm-viewport
    background: var(--primary-color) !important

  .sb-dialog-content
    position: relative
    background-color: #0b1219
    padding: 0
    overflow: hidden

    .p-tabview-nav-link
      padding-right: 10px !important

.sb-terminal-container
  position: relative
  padding: 8px

  .sb-terminal-expired
    backdrop-filter: blur(4px)
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    display: flex
    flex-direction: column
    align-items: center
    gap: 8px
    justify-content: center

    .sb-terminal-expired-title
      font-size: 48px
      font-weight: 700
      margin-bottom: 10px
      color: var(--primary-color-border)

    .sb-terminal-expired-text
      font-size: 20px
      margin-bottom: 18px
      color: rgba(255, 255, 255, 0.6)

.sb-terminal-new-tab-overlay
  background-color: var(--overlay-color)
  border-color: var(--primary-color-border)

  .p-listbox
    border: none
    background-color: transparent

    .p-listbox-item-group
      background-color: transparent
      border: 1px solid transparent
      padding: 0
      user-select: none
      font-weight: 400
      cursor: pointer
      border-radius: 2px

      div
        padding: 12px

      &:hover
        backdrop-filter: brightness(1.2)

      &:active
        backdrop-filter: brightness(1.3)

    .p-listbox-list
      padding: 0

.sb-terminal-tab-header
  display: flex
  flex-direction: row
  gap: 14px
  justify-content: center
  height: 20px
  line-height: 20px
  align-content: center

  i
    font-size: 10px
    line-height: 20px

  .sb-terminal-tab-header-close
    border-radius: 24px
    width: 20px
    display: flex
    flex-direction: row
    align-content: center
    justify-content: center

    &:hover
      background: rgba(255, 255, 255, 0.16)

  .p-tabview-title
    line-height: unset

.sb-terminal-tab-header-add
  i
    font-size: 14px

.p-tabview
  .p-tabview-panels
    display: none

  .p-tabview-nav-btn
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0px 2px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 20px 0px rgba(0, 0, 0, 0.8)
    background: var(--overlay-color)
    color: var(--primary-color-border)

  .p-tabview-nav-content
    background: var(--overlay-color)

  .p-tabview-nav
    border: none

    li
      .p-tabview-nav-link
        border: 0 solid transparent
        border-top: 2px transparent solid
        border-radius: 4px 4px 0 0
        margin: 0
        padding: 12px 16px
        background: var(--overlay-color)

      &.p-tabview-selected
        .p-tabview-nav-link
          border-top-color: var(--primary-color-border)
          border-bottom-color: var(--primary-color)
          color: var(--primary-color-border)
          background: var(--primary-color)
