$tabs-padding                  ?= 12px 12px
$tabs-padding-with-icon        ?= 6px 10px
$tabs-big-screen-horiz-padding ?= 25px
$tabs-min-height               ?= 50px
$tabs-min-height-with-icon     ?= 62px
$tabs-big-screen-side-padding  ?= 12px
$tabs-pane-padding             ?= 12px
$tabs-color                    ?= $toolbar-color
$tabs-background               ?= $toolbar-background
$tabs-inverted-color           ?= $grey-6
$tabs-pane-border              ?= 1px solid rgba(0, 0, 0, .1)
$tabs-unselected-opacity       ?= .6
$tabs-font-size                ?= .9rem
$tabs-icon-font-size           ?= 24px
$tabs-font-weight              ?= 400
$tabs-text-transform           ?= uppercase

$dot-color             ?= rgba(255, 0, 0, 0)
$dot-opacity           ?= .8
$dot-size              ?= 10px
$dot-position-top      ?= 10px
$dot-position-right    ?= 10px

.s-tabs
  flex-direction column

.s-tabs-scroller
  overflow hidden
  color $tabs-color

.s-tab-pane
  padding $tabs-pane-padding
  border $tabs-pane-border

.s-tabs-no-pane-border .s-tab-pane
  border 0

.s-tabs-panes:empty
  display none

.s-tab-icon, .s-tab-label
  opacity $tabs-unselected-opacity

.s-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  text-transform $tabs-text-transform

  > .s-icon, .s-tab-label
    transition transform .2s
  > .s-icon + .s-tab-label
    margin-top 7px
  .s-tab-label
    text-align center

  &.icon-and-label
    padding $tabs-padding-with-icon
    min-height $tabs-min-height-with-icon

  .s-tab-icon
    font-size $tabs-icon-font-size

  .s-chip
    top 5px
    right 0
    left initial
    color white
    background alpha($dot-color, .75)

  &.active
    > .s-icon, .s-tab-label
      transform scale(1.1)
    .s-tab-icon, .s-tab-label
      opacity 1
  &:active
    background rgba(255, 255, 255, .3)

@media (max-width $breakpoint-sm-max)
  .s-tab
    &.hide-icon .s-tab-icon,
    &.hide-label .s-tab-label
      display none !important

@media (max-width $breakpoint-md-max)
  .s-tabs-head:not(.scrollable)
    .s-tabs-scroller, .s-tab
      flex 1 1 auto

@media (min-width $breakpoint-lg-min)
  .s-tab, .s-tab.icon-and-label
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .s-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding

.s-tabs-head
  min-height $tabs-min-height
  overflow hidden
  background $tabs-background
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative

  &:not(.scrollable)
    .s-tabs-left-scroll, .s-tabs-right-scroll
      display none !important

.s-tabs-left-scroll, .s-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  .s-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &:hover .s-icon
    visibility visible
  &.disabled
    display none

.s-tabs-left-scroll
  left 0
  background linear-gradient(to left, transparent, rgba(255, 255, 255, .5))
.s-tabs-right-scroll
  right 0
  background linear-gradient(to right, transparent, rgba(255, 255, 255, .5))

.s-tabs-align-justify
  .s-tabs-scroller, .s-tab
    flex 1 1 auto
.s-tabs-align-center
  justify-content center
.s-tabs-align-right
  justify-content flex-end

.s-tabs-two-lines .s-tab
  white-space normal
  .s-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

.s-tabs-position-bottom .s-tabs-panes
  order -1

.s-tabs-inverted
  .s-tab
    color $tabs-inverted-color
    &.active
      color $tabs-background
    &:active
      background rgba(0, 0, 0, .1)

  .s-tabs-scroller
    color $tabs-background

  .s-tabs-left-scroll
    background linear-gradient(to left, transparent, rgba(0, 0, 0, .1))
  .s-tabs-right-scroll
    background linear-gradient(to right, transparent, rgba(0, 0, 0, .1))

  .s-tabs-head
    background transparent

  &.s-tabs-position-top
    .s-tabs-panes
      border-top $tabs-pane-border
    .s-tab-pane
      border-top 0

  &.s-tabs-position-bottom
    .s-tabs-panes
      border-bottom $tabs-pane-border
    .s-tab-pane
      border-bottom 0

body.mobile .s-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch