@import variables
@import mixins

$breakdown-switcher: 560px

.views
  display: inline-block
  margin-right: 10px
  font-size: size('compact')
  @include custom-device($breakdown-switcher)
    width: 100%
  @include sm-device
    margin-top: 10px
    font-size: size('normal')
  @include xs-device
    margin-top: 5px
  li
    white-space: nowrap
    background: #fafafa
    border: 1px solid #ddd
    border-right: none
    padding: 4px 8px
    display: inline
    @include custom-device($breakdown-switcher)
      display: block
      margin-top: 5px
      border-radius: 5px
      border: 1px solid #ddd
    &.active a
      font-weight: bold
      color: color('dark')
      text-decoration: none
    &:first-child
      border-top-left-radius: 5px
      border-bottom-left-radius: 5px
    &:last-child
      border-right: 1px solid #ddd
      border-top-right-radius: 5px
      border-bottom-right-radius: 5px
  a
    color: color('medium')
    text-decoration: none
    &:hover
      color: color('primary')
      text-decoration: underline