// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
.tabbar
  @extend .columns
  margin: $gap 0
  border-bottom: .15rem solid $border
  background-color: $white

  +dark-mode
    background-color: shade($dark, .5)
    border-color: shade($dark, .3)

  &.has-background-transparent
    background-color: transparent

    .is-active
      background-color: $white
      color: $dark
      font-weight: bold

      +dark-mode
        background-color: $dark
        color: $white

  &-link
    @extend .column
    margin: 0
    padding: $gap
    color: $black
    text-decoration: none
    text-align: center

    +dark-mode
      color: $text-color-dark

    &:hover
      background-color: rgba($black, .02)

    &.is-active
      position: relative
      font-weight: 600
      &:after
        content: ""
        position: absolute
        width: 100%
        height: .15rem
        background-color: $blue
        bottom: -.15rem
        left: 0

      +dark-mode
        color: $white

  &-button
    align-self: center
    margin-left: auto

  &-label
    font-size: .9em
    font-weight: 700
    text-transform: uppercase
    opacity: .25
    margin-left: 1rem

  // when a container is used to wrap the links, make sure it's
  // an extension of the initial tab bar.
  & > .container
    @extend .tabbar
    @extend .no-margin-y
    @extend .no-border-bottom
    &.is-fixed
      margin-left: auto
      margin-right: auto

      .tabbar-link:first-child
        margin-left: 0
      .tabbar-link:last-child
        margin-right: 0

  // optional responsive behavior that will 'hide' the non-active tabs
  &.is-rs-static
    & > .tabbar-link:not(.is-active)
      display: none

  // additional styles for tab-like navigation in a different fashion
  &.is-rounded
    background: transparent
    border-bottom: 0

    .tabbar-link
      background-color: $white
      border-radius: 2rem
      &:hover
        background-color: $light
      &.is-active
        background-color: $blue
        color: $white
        &:after
          display: none
