.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ru(0.5);
  cursor: pointer;
  flex-grow: 1;
}

.tabs-wrapper {
  display: flex;
  padding: 0;
  .tab:first-child {
    &.active {
      border-right: 1px solid color('neutral-4');
    }
  }

  .tab:last-child {
    &.active {
      border-left: 1px solid color('neutral-4');
    }
  }
}

.tag-text {
  margin-left: ru(0.5);
}

.active {
  margin-top: ru(-0.25);
  border-top: 1px solid color('neutral-4');
  background: color('neutral-8');
}

.inactive {
  background: color('neutral-5');
  border-bottom: 1px solid color('neutral-4');
  border-top: 1px solid color('neutral-4');

  &:hover {
    span {
      color: color('primary-3');
    }

    g {
      fill: color('primary-3');
    }
  }
}