@import "../css/colors"
@import "../css/vars"

:local(.tabs)
  position: relative
  display: flex
  align-items: flex-start
  flex-wrap: wrap

:local(.standalone)
  width: 100%;
  margin: 30px 0 20px
  border-bottom: solid 1px $borderGray

:local(.tab)
  font-family: $sansserif
  position: relative
  background-color: $white
  height: 42px
  align-items: center
  display: flex
  padding: 0 20px
  border: solid 1px $borderGray
  cursor: pointer
  margin: 0 0 1px -1px

  &:hover
    background-color: $darkGray
    color: $white

:local(.tab.active)
  font-weight: 600
  background: $blue
  border: solid 1px $blue
  color: $white
  cursor: default;

  &:first-child
    border-left: solid 1px $borderGray

:local(.standalone .tab)
  margin: 0 0 -1px

// :local(.standalone .tab.active)
//   border-bottom: solid 1px $white