.switch-view {
  background: $white;
  display: inline-flex;
  border-radius: $radius;
  font-size: .75rem;
  box-shadow: $shadow-sm;
  height: $switch-view-height;
  margin-bottom: 1rem;
  padding: .5rem;

  a {
    padding: .25rem .5rem;
    display: block;
    border-radius: $radius;

    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -ms-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;

    &:not(:last-child) {
      margin-right: .5rem;
    }

    &.is-active, &:hover {
      color: $white;
    }

    &.is-active {
      background: $primary;
      font-weight: bold;
      box-shadow: $shadow-xs;
    }

    &:hover {
      background: $primary;
    }
  }
}

@media screen and (max-width: $tablet) {
  .switch-view-container {
    display: flex;
    justify-content: center;
  }
}