.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol

    > li {
      display: block;
      flex-grow: 1;
      padding: 10px 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});

.ns("frontend.components.pieces.tabs", {
  .ui("tab-row", {
    .flexy();

    margin-bottom: 0;
    padding-left: 0; // Override default ul/ol

    > li {
      display: block;
      flex-grow: 1;
      padding: 15px;

      color: @grayDark;

      background: @grayLightest;
      border-right: 1px solid @grayLighter;

      > .tab-label {
        vertical-align: middle;
      }

      &:last-child {
        border-right: none;
      }

      &:hover {
        cursor: pointer;
        color: @grayDarker;
        background-color: @whiten;

        > .tab-icon {
          color: @grayDark;
        }
      }

      &.active {
        background: @white;
        font-weight: 500;

        > .tab-icon {
          color: @grayDark;
        }

        &:hover {
          cursor: default;
        }
      }

      > .tab-icon {
        margin-right: 1ex;
        margin-left: 0;

        color: @grayLight;
      }

      // TODO: This style belongs to a future icon component, not the tab row.
      i.fa.fa-bitbucket {
        font-size: @fontSizeLarge;
      }
    }
  });
});

Fix card tab heading height
Fix card tab heading height
