@import "colors";
@import "mixins";

.tabs {
  li {
    display: inline-block;
    line-height: 36px;
    position: relative;
    text-align: center;
    font-size: 14px;
    border-radius: 3px 3px 0 0;
    border: 1px solid transparent;

    a {
      display: block;
      padding-left: 20px;
      padding-right: 20px;
      color: $black;
    }

    &.active {
      background-color: #FFFFFF;
      border-top: 1px solid $border-grey;
      border-left: 1px solid $border-grey;
      border-right: 1px solid $border-grey;

      a {
        color: $blue;
      }

      .badge {
        color: $blue;
      }
    }

    &:hover {
      a {
        color: $blue;
      }

      .badge {
        color: $blue;
      }
    }

    .badge {
      background-color: rgba(0, 0, 0, 0.08);
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 100px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.6);
      font-size: 14px;
    }

    .notifications {
      top: 3px;
      right: 3px;
    }
  }
}