/*------------------------------------
  Tab Modern
------------------------------------*/

.tab-modern {
  border-bottom: none;

  .tab-modern__nav-link {
    min-width: 15rem;
    color: $paragraph-color;
    text-align: center;
    font-weight: $font-weight-normal;
    border: none;
    border-bottom: 2px solid $gray-300;
    @include border-radius(0);
    padding: .5rem;

    &-icon {
      display: block;
      filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
      filter: gray;
      -webkit-filter: grayscale(100%);
    }

    &.active {
      color: $primary;
      border-bottom-color: $primary;
      background-color: transparent;

      .tab-modern__nav-link-icon {
        filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
      }
    }

    &:hover, {
      color: $primary;

      .tab-modern__nav-link-icon {
        filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
        -webkit-filter: grayscale(0%);
      }
    }
  }
}