/* All these styles are mobile first. 
  Variations that are applied with media queries
  are for horizontal/landscape screens.
  This means that some property-value pairs for landscape
  are there to over-write the default values.
/*
  The !important rules are there to overwrite
  Anki's annoying button styling (which has specificity
  of 20+, so can't be easily overwritten...).

.tab
    flex: 0 1 auto
    overflow: hidden
    display: flex
    &--isactive .tab__label, &--isfullscreen .tab__label
        // General active style: label
        background: var(--main-background) !important
        color: var(--accent-color) !important
        border-right: 1.5px solid var(--accent-color) !important
        @media (min-aspect-ratio: 1/1)
            border-bottom: 1.5px solid var(--accent-color) !important
            border-right: 1px solid var(--secondary-background) !important

    &--isactive .tab__body, &--isfullscreen .tab__body
      // Show the tab when active
      display: block

    &--isfullscreen .tab__body
      position: fixed !important
      z-index: 9999
      height: 100%
      @media (min-aspect-ratio: 1/1)
        height: calc( 100% - 35px )
        width: 100%

.tab__label
    background: var(--tabs-label-background) !important
    cursor: pointer
    user-select: none
    color: var(--secondary-color) !important
    line-height: 35px
    text-decoration: none
    margin: 0 !important
    border: none !important
    box-shadow: none !important
    border-radius: 0 !important
    padding: 10px 0 !important
    width: 35px !important
    height: auto !important
    border-top: 1px solid var(--secondary-background) !important
    border-bottom: 1px solid var(--secondary-background) !important
    border-right: 1.5px solid var(--tabs-label-background) !important
    display: inline-flex
    flex-direction: column
    &:focus-visible
      box-shadow: none !important
      outline: 2px solid var(--accent-color) !important
      outline-offset: -2px !important
    @media (min-aspect-ratio: 1/1)
      padding: 0px 10px !important
      height: 35px !important
      width: 100% !important
      flex-direction: row
      border-bottom: 1.5px solid var(--tabs-label-background) !important
      border-left: 1px solid var(--secondary-background) !important
      border-right: 1px solid var(--secondary-background) !important
      border-top: none !important
      &::before
        counter-increment: tabs
        content: counter(tabs)
        margin-right: 5px
        font-weight: bold
        color: var(--accent-color)

.tab__label span
    text-overflow: ellipsis
    overflow: hidden
    white-space: nowrap
    writing-mode: vertical-lr
    @media (min-aspect-ratio: 1/1)
      writing-mode: lr !important

.tab__body
    display: none
    background: var(--main-background)
    color: var(--main-color)
    overflow-y: scroll
    width: calc( 100% - 35px )
    height: 100%
    @media (min-aspect-ratio: 1/1)
      height: calc( 100% - 35px )
      width: 100%
    &:focus-visible
      outline: 3px solid var(--accent-color)
      outline-offset: -3px

    &::-webkit-scrollbar
        width: 10px
        border-left: 1px solid var(--secondary-color)
        background: var(--secondary-background)
    &::-webkit-scrollbar-thumb
        background: var(--secondary-color)
        border-left: 1px solid var(--secondary-color)

.tab__body__content
    max-width: 70vw
    min-width: calc(50vw - 14px)
    padding: 15px 15px
    margin: 0 auto
    @media (min-aspect-ratio: 1/1)
      padding: 35px 25px
